4 ms·

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 ma

by notJim 6y ago

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.

seumars 6y ago
Writing actual CSS is the waste of time. SASS variables, mixins, and the "&" operator are pretty much indespensable.
- runarberg 6y ago
  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/--* https://developer.mozilla.org/en-US/docs/Web/CSS/--* [2]: https://drafts.csswg.org/css-nesting-1/ https://drafts.csswg.org/css-nesting-1/ [3]: https://postcss.org/ https://postcss.org/ [4]: https://github.com/postcss/postcss-mixins https://github.com/postcss/postcss-mixins
  - desert_boi 6y ago
    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.
    - runarberg 6y ago
      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/ https://www.w3.org/TR/css-color-4/ 1: https://www.w3.org/TR/css-color-5/ https://www.w3.org/TR/css-color-5/
runarberg 6y ago
> 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); }
- notJim 6y ago
  Yup, classes are the way to go.
andrei_says_ 6y ago
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.

by notJim 6y ago

seumars 6y ago

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

runarberg 6y ago
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/--* https://developer.mozilla.org/en-US/docs/Web/CSS/--* [2]: https://drafts.csswg.org/css-nesting-1/ https://drafts.csswg.org/css-nesting-1/ [3]: https://postcss.org/ https://postcss.org/ [4]: https://github.com/postcss/postcss-mixins https://github.com/postcss/postcss-mixins
- desert_boi 6y ago
  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.
  - runarberg 6y ago
    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/ https://www.w3.org/TR/css-color-4/ 1: https://www.w3.org/TR/css-color-5/ https://www.w3.org/TR/css-color-5/

runarberg 6y ago

> 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); }

notJim 6y ago
Yup, classes are the way to go.

andrei_says_ 6y ago

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.