Should we adopt a CSS naming convention?
Should we discourage nesting and cascading selectors?
With those conventions
all CSS is easily relatable to HTML parts and can find if it can be deleted (impossible with cascading)
minimizes unexpected styling because there's no cascading
encourages thinking of UI components instead of styling documents
naming convention helps understand UI element, its parts, and state modifiers, and extra utility classes
Here are some resources to consider if we would be up for this:
Article that explains the problems: https://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/
Most used conventions:
SUIT CSS: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
BEM CSS: http://getbem.com/naming/
They can be enforced via stylelint: Example: https://github.com/suitcss/stylelint-config-suitcss
We haven't been hit by the .search bug many times, but it is certain that looking at some pieces of CSS it is very hard to impossible to know to which UI elements they will apply on the whole page.
We should also explore OOCSS: https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
Timebox: 8hrs, involving all members of the team. Owner should facilitate and collate the results of the conversation.
- Define the problem
- Discuss changes that may help remove that problem (frameworks/enforcing conventions)
- Agree on some guidelines on how to proceed (if any)
- Capture these details in a new task tagged epic and reading-web-backlog.