Re:Twin – Tailwind with the flexibility of CSS-in-JS
by sbergot on Thursday December 03, 2020 @10:27AM
(#25289710)
Ids are rarely used in webapp because most people are using a component based approach. By nature they can be instantiated multiple times so you can only use classes.
The basic approach is to only use selectors with a single class name and nothing else. No child selector or anything.
Then you use a naming convention for class names. The most popular is called BEM (for Block/Element/Modifier).
You might use other libraries. Those work by generating class names for you and applying those classes at the right place. There is a whole set of possibilities here: css-modules, styled-component, jss, etc. Some of those libraries use a separate file for writing the css rules (like css modules). Some other libraries ask you to write those rules next to your react/angular/whatever component (styled-component/jss). Those are often called css-in-js.
All of this is only useful when you are making a webapp.
The basic approach is to only use selectors with a single class name and nothing else. No child selector or anything.
Then you use a naming convention for class names. The most popular is called BEM (for Block/Element/Modifier).
Sass can help you write BEM class names: https://medium.com/@andrew_barnes/bem-and-sass-a-perfect-mat...
You might use other libraries. Those work by generating class names for you and applying those classes at the right place. There is a whole set of possibilities here: css-modules, styled-component, jss, etc. Some of those libraries use a separate file for writing the css rules (like css modules). Some other libraries ask you to write those rules next to your react/angular/whatever component (styled-component/jss). Those are often called css-in-js.
All of this is only useful when you are making a webapp.