BEM support

[toby3d]

I can try help you with refactoring TocasUI to architecture on BEM-methodology. :thinking:

[YamiOdymel]

Well... to start with this topic, I've to talk about some problems I've encountered with.

There're few problems with the Semantic UI naming convention right now:

1. It has naming conflict with some child selectors sometimes. (ex: ".ts.grid .column" == ".ts.grid > .ts.form > .column")

2. In Vue.js or React.js, if you toggle the class .right.floated with an element like .ts.right.floated.right.aligned.button, the .right.aligned will be affected too.

BEM naming convention solves the problems which mentioned above.

Tocas UI 3 was almost refactored with BEM-naming convention, but someone and me still not comfortable _with-the-very_long-name so I just stopped.

[YamiOdymel]

Also another thing with the naming convention. I've checked with RSCSS before, it's more like how Tocas UI 3 should be (the class name pronounces... more natural?).

<div class="ts -one-column grid">
    <div class="column">
        <button class="ts -large -compact -left-aligned button">
            Button
        </button>
    </div>
</div>

Which also solves the second primary problem (the Vue.js class name toggling thing), and you don't really have to deal with a long name like this (I'm not so sure if it looks like this in BEM-style).

<div class="grid grid--one-column">
    <div class="grid-column">
        <button class="button button--large button--compact button--left-aligned">
            Button
        </button>
    </div>
</div>

I'd say the naming convention is much harder than programming, I still couldn't even decided until now. 🤔

[toby3d]

...and you don't really have to deal with a long name like this (I'm not so sure if it looks like this in BEM-style).

Like this?

<!-- "grid" block with "wide" modifier equal 1 -->
<div class="grid grid_wide_one">
    <!-- "column" element of the "grid" -->
    <div class="grid__column">
        <!-- "button" block with "compact" modifier (also, it -->
        <!-- can be like "button_style_compact"), "large" size -->
        <!--  and "left" aligned. You can add specific -->
        <!--  "grid__button" mix for set position -->
        <button class="button button_compact button_size_large button_align_left">
            Button
        </button>
    </div>
</div>