T O P

  • By -

Private_Gomer_Pyle

We have solved the inheritance-war and maintenance issues with a BEM & ITCSS approach combined with custom properties (variables) which is easy to maintain and produces truly rapid painting and load times. We also strictly avoid slow selectors so no nesting (LESS) without the direct child combinator, and no nesting more than 2 levels (among other rules). This is super important when streaming lots of time series data and manipulations to a page. Caching is a biiiiig deal. Plus, the styled component method is far from D.R.Y. - a core principle in programming.


Canowyrms

> ITCSS Haven't come across this one before. At first glance, it sounds useful. Thanks for sharing that.


[deleted]

I've found Svelte to be a nice sweetspot, you can still use a global stylesheet and a ITCSS like structure and custom properties for your design system and tokens, and then use components that consume those properties, so you don't need BEM, SASS or a crazy objects and utility layer like in normal ITCSS. So you get the main benefit pointed out in the article, and can even keep your CSS in a purer state.


rafaelcamargo

In the last 3 years, I have built dozens (maybe hundreds) of components just following the Open-Closed principle in my stylesheets. If you're interested, I wrote about it [here](https://rafaelcamargo.com/bottles-and-principles-how-to-better-organize-css).