Hacker News Reader

Comment by 1ba9115454 | Hacker News Reader

Personally I prefer to write the CSS (well Sass really). I've mainly used Bootstrap in the past.

I've moved on though, I learned flexbox and css grid and some atomic design principals as well as ABEM (https://css-tricks.com/abem-useful-adaptation-bem/) and I'm happy.

View on HN

I find https://rscss.io/ to be a really nice design philosophy that takes the best parts from BEM.

And agreed: it's easiest to just work directly with flexbox (and grid if you can drop IE11), and a set of design principles is really valuable to avoid spaghetti.

You don't need to drop IE11. IE ws the first browser to implement any kind of grid feature, but even still you can just feature query for support

I don't mind hand-writing CSS for a small project, but I feel like once you've got a decent team, it ends up being duplicative and wasting a lot of time. How many times do you really need to style button/link and write out your 8px margins (or is it 6?) Sass solves this too, but simply applying classes is even easier and faster for me at least. I thought BEM was horrible when I first saw it, but once I used it, the productivity just feels like magic.

Writing actual CSS is the waste of time. SASS variables, mixins, and the "&" operator are pretty much indespensable.

Vanilla CSS has custom properties[1] (which are more powerful then SASS variables) and there is a proposal for the `&` nested selector[2] which you can get with PostCSS[3]. All you are missing are mixins, but there is a PostCSS plugin for that[4].

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*

[2]: https://drafts.csswg.org/css-nesting-1/

[3]: https://postcss.org/

[4]: https://github.com/postcss/postcss-mixins

Who's to say you can't use Sass variables _and_ CSS variables?

My current shop is moving to switch our sass color function `color.get()` to either dump hardcoded hex or a css variable usage based on a param. It currently just does hex.

Well, it was a response to the parents claim that “[w]riting actual CSS is the waste of time”.

You might be happy to learn that CSS color module 4[1] will add `lab()` and `lch()` color definitions and CSS color module 5[2] will add the `color-adjust` function as well as other goodies.

1: https://www.w3.org/TR/css-color-4/

1: https://www.w3.org/TR/css-color-5/

> How many times do you really need to style button/link and write out your 8px margins.

Either 0 or 1 times. Use semantic classes `<a href="/path/to/create-stuff" class="button">` and use custom properties or the cascade from there:

    :root {
      --button-margin-block: 1ex;
      --button-margin-inline: 1em;
    }

    dialog {
      /*
       * Modals buttons need more block space and
       * less inline space.
       */
      --button-margin-block: 1em;
      --button-margin-inline: 1ex;
    }

    button,
    .button {
      margin-block: var(--button-margin-block);
      margin-inline: var(--button-margin-inline);
    }

Yup, classes are the way to go.

BEM is awesome and simple mapped values in SCSS + functions let me do things like:

padding: p(‘s’) p(‘m’);

For that 8-px magic.

c for colors, bp for breakpoints, f for fonts etc.

This solves all the inconsistencies addressed by css frameworks and gives me slightly larger LEGO blocks.

Thanks for the link. ABEM makes a lot of sense the way it's presented.

Out of interest, that article goes out of its way to argue that the whole BEM format is changed to CamelCase, so that the atomic modifier can use "-".

Why wouldn't you just use the existing BEM component separator "__", and then nothing else need change.

The CamelCase version is prettier granted, but rather than an extra bit of information, it's a completely new format.

Once I discovered utility classes, I found it so much better than BEM or any derivatives of such. I don't want my styles to know what my components are, I want my components to use predefined styles.

I feel like utility classes and BEM go well together, though. BEM for sort of atoms/molecules (to use the lingo from the linked css-tricks page), and then utility classes to tweak the components, and to make components play nicely together (Fixing up margins, etc so things flow right and are the right size.)

Reply on news.ycombinator.com