We all know when project/s gets really big, CSS problems will pop out and will take a lot of your time troubleshooting rather than finishing your tasks. Here are some problems:
- Rule clash, since the project is big. There's a possibility of rule clash.
- Cascading too much
#override-sale .checkout-dog .full-width .button-primaryis real. Specificity makes the style hard to refactor and introduce unnecessary performance overhead for applying styles - Class with JS on it are hardest to deal with.
This is a simple guidelines that I'm implementing when doing CSS. Adapted from the work being done in the SUIT CSS framework and @fat's guideline. Which is to say, it relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This is to help developers to quickly understand the code even at glance.
Table of Contents
- Utilities
u-<screen size | optional>-<utilityName>
- Components
- componentName
<componentName>[--modifierName|-decendantName]- componentName--modifierName
- componentName-decendantName
- componentName-decendantName--modifierName
- componentName.is-stateOfComponent
<componentName>[--modifierName | -decendantName--modifierName] > -childSelector- JavaScript
js-<targetName>
Syntax: u-<screen size | optional>-<utilityName>
With its narrow scope, utilities can be applied to any element and may end up being used frequently because of separation from the semantics of the document and the theming of a component.
Utilities make use of !important to ensure that their styles always apply ahead of those defined in a component's dedicated CSS.
You can check SUIT CSS Utils here