(Image source: reddit)
I had a thought: what if we can write down bad parts - things that you should avoid - for CSS.
- Global styles. Whenever I use styling based on tag names or use nested selectors I find conflict in styles eventually. Instead we can use unique class names for each element. This approach requires some tooling (for example, CSS Modules) or atomic styles.
- Margins. See Margin considered harmful.
- Z-index. Whenever you start using z-index, eventually you will get
z-index: 999999999or conflicting items (for example, custom select vs modal). Instead we can rely on order of elements in the DOM. See Z Index Wars.
What else would you recommend to avoid?