styling.md

Drawbacks of 'classical' styling approach

• Styles are often hard to find, at least viewing another file is required
• Classnames are inconsistent and messy, approaches have been changed over the course of development (BEM, OOCSS)
• Dynamic styles are harder to implement, classname-switching based on props needs extra code
• Theming conflicts are common, refactor/cleanup is very time consuming
• Picking classnames is annoying and takes time, can even be a point of contention in code review
• There is no easy-to-handle plugin/extension system
• Choosing performant selectors becomes the developer's responsibility
• Selectors based on tagName can be hard to read and can cause conflicts when changing the DOM structure
• Overriding styles or adjusting styles is harder, as specificity needs to be increased to override properties, or the dreaded !important needs to be used
• JSX becomes harder to read with className everywhere
• Testing and linting can be hard to do