Are there alternative patterns to BEM?

Tried BEM. Doesn't work for me.

Don't try to convince me otherwise, please. I've been in the industry for quite a while and I am pretty sure I can recognize by now what works for me and what doesn't.

I have my own patterns, but I was wondering if there's someone else on this boat, and if these people tried to formalize alternatives to BEM somehow.

Do you know any?

I have no first-hand knowledge of this but I heard the author of this speak about their guide in ways that made sense:

rscss stands for Reasonable System for CSS Stylesheet Structure. Seems reasonable.

Functional CSS - Tachyons is a good example. I've been using it for a couple of years in web apps and designs, and I've never looked back because I've never been happier about the amount of CSS I have to write (zero).

If you go over the website describing BEM you'll see it's mentioning 4 others that are more or less known. OOCSS, SMACSS, SUITCSS and Atomic. All are trying to work around the lack of 'namespacing' in css.

I don't really like BEM either. All these systems (especially OOCSS) seem horribly non-semantic, or at least they get that way quickly.

Depending on the scale of the app, I'm not sure it's necessary to hang your hat on semantic CSS. If the app is small, having, for example, a functional CSS approach allows you to just say "I want the corners rounded here, add the corner rounding class." In larger apps, you're probably going to end up using server-generated partials, or components of some sort, or functional generation, and in any of those cases it's easy to define style at a higher level than CSS.

This might be why it's common to dislike BEM - because it's solving a problem at a middle-level scale. It's too big for small apps, and not big enough for big apps.

BTW this article has an amazing analysis of rampant CSS class reuse/abuse on big web sites. It's worth a read for sure.

I read that just now and I'm not sure what it's getting at. It seems to be saying "because I can't get X to work and because Big Company Y don't seem to care, I don't need to care either".

I followed on to the "mic drop" semantic-CSS article and agree more with that one.

@muppling I think you're definitely right that caring is the magic ingredient, regardless of which approach one uses. Without that, no CSS heuristic or framework or approach is going to save you.

Heard about OOCSS, I've never tried it though

Basically I use BEM. Sometimes use for rapid prototyping. But I'm interesting with Atomic CSS by Yahoo. While tachyons and another framework has 'their' standard (font-size, etc), in Atomic CSS we can specify it with our own.

Let's say we make a button:

<a class="D(ib) Bd Bdc(red) Px(1.3rem) Py(0.5rem) Bdrs(2px) Bgc(white) Bgc(red):h Td(none) C(red) C(white):h Td(n) Fz(14px)" href="#">
  Press Me

It's little weird, and we must remember that syntax. But it looks promising

If you curious about it, go check it here:

Some web app I know using ACSS:

Click here to getting know what benefits of atomic css

You might be looking for SMACSS. I follow something similar to this, but I had actually intended to follow it more closely (I'm always flitting between different company's code-bases and it's hard to stay on the straight and narrow).

Classic DEV Post from Nov 25 '17

Let's talk net neutrality

What do you think the results of the latest push to abolish net neutrality in the US will be?

Follow @ben to see more of their posts in your feed.