Change Details

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/

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. Outcome: Some guidelines on how to proceed

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. Outcome: Some guidelines on how to proceed