4 ms·
I honestly have never seen the value in pre-processors when writing CSS. I think they abstract a lot of low-level understanding of your UI and make your stylesh
by whoisjuan 8y ago
I honestly have never seen the value in pre-processors when writing CSS. I think they abstract a lot of low-level understanding of your UI and make your stylesheets overly complex. They definitely keep things sane when doing CSS at very large scale (for example dealing with color palettes, fonts, etc) but are not that useful when you're writing different components with different rendering needs.
Nowadays I just do functional CSS (Tachyons, Tailwinds, Fractures, etc). It has some drawbacks but you can go faster and change things more atomically without breaking everything when changing a class, and you have the safety given by the fact that every property have the same level of specificity (which can be overriden by JS generated style attributes, in case you need to manipulate the DOM directly)
Also, you can address your rendering needs atomically which works very nicely when you're writing components in isolation. They also are an excellent approach when doing server-side rendering since you can store classes combinations in variables that can be passed from one template to another or used and overriden in the same template as it gets evaluated by the server. It's almost like a pre-processor without the hassle of recompiling your sheets.
- nkozyra 8y ago> I honestly have never seen the value in pre-processors when writing CSS. As mentioned, theming and consistent ux requires far less writing and copy paste with a preprocessor than in pure CSS. I think React's approaches make CSS feel simpler but often just sweep the inefficiencies under the rug. A lot of this is being fixed with CSS4, so these will go the way of jQuery. And while you don't need jQuery today, it served as an important polyfill for a long time.
- scrollaway 8y ago> A lot of this is being fixed with CSS4 CSS4 won't have nesting. SCSS isn't going away as long as nesting isn't a thing in native css. (Also css variables are awful to use. Honestly, CSS-WG should have just copied most of scss's syntax)
- nkozyra 8y agoI agree about CSS variables. I'm unsure about the merits of nesting. Tends to make for some hard-to-read code.
- frosted-flakes 8y agoMost nesting I do uses the '&' parent selector, so it's not "real" nesting. .a-long-class-name { background: firebrick; &:hover { background: red; } } This approach has some clear benefits (less verbose and it groups related code together) with little or no downsides.
- nkozyra 8y agoSame, but this can definitely get long, ala & > div, & a, & a { &:hover } etc.
- frosted-flakes 8y agoYour example is a bit confusing. This would be a more idiomatic way of writing it: .some-class { > div, a { background: blue; &:hover { background: red; } } }
- have_faith 8y agoThe solution is to not write css like this... ;)
- dmitriid 8y agoCompared to BEM's .b-text-input__text-field or .b-select__option_selected or .media__img--rev nesting is a concise readable breath of fresh air
- h1d 8y agoSo you still type all this, .selector .child_one, .selector .child_two { color: #000; } instead of, .selector .child_one, .child_two color #000 I no longer type a semi colon when developing a web site thanks to preprocessor and transpilers.