Website: Is "Get the same benefits as BEM" accurate?

[henrik]

I've seen #3671, but feel this is a very separate question.

https://semantic-ui.com/ says "Get the same benefits as BEM or SMACSS, but without the tedium."

From a quick look, though, it seems to run counter to BEM. I'm not saying that's bad, just wondering if I'm missing something, or if that text could maybe be clarified.

My understanding of BEM is that it wants to minimise CSS specificity conflicts by using single classes rather than complex selectors (.foo__bar instead of .foo .bar or .foo.bar), and to make hierarchies very clear with explicit (though arguably tedious and technical) naming – in my previous example, you know that the "bar" is a subpart of a "foo".

From a brief look at the start page of Semantic UI, it makes very different trade-offs. Which, again, is fine – I'm just curious if I'm missing something and Semantic UI in fact does get those same benefits as BEM, in addition to its natural language style syntax.

[y0hami]

I think what @jlukic means is that when you write semantic classes you can easily see how elements are getting styled via its natural language and the structure of the component.

e.g.

BEM:

.image {}
.image--large {}

SUI:

.ui.large.image {}

With SUI there is a few constant modifier classes used throughout the framework like small, .large, .center, right etc. Theses are your modifier classes.

There is also the block classes which are the main class for each component like .button, .grid, .dropdown etc.

In some cases you also have element classes like the dropdown component .dropdown is your block and then inside that you have .text which is the placeholder, .menu which is then a list of dropdown items these are both elements of the .dropdown block.

As you can see semantics classes build up very similar to the likes of BEM

I hope this clears up any questions you may have.

[henrik]

@hammy2899 Thank you very much! Appreciate it. That clears it up a bit.

I'm curious about how this compares to something like BEM as a project grows in complexity. In my experience, BEM solves some problems I've felt from previous ways of (not) structuring CSS, including avoiding specificity wars and being clear about which classes go together as one component. Are those pain points with SUI in a complex project, or does SUI help avoid those issues?

This is quite possibly beyond the scope of a GitHub issue – please feel free to close it if so :)