Here are some steps to CSS sanity. As always, this are guides, not rules. However, if you do find yourself breaking them ask yourself 5 whys. This usually leads to uncovering a misuderstanding of how CSS works or how a site's CSS works.
Read SMACSS
Never use ids
// This is bad
#foo-bar { }
// This is good
.foo-bar { }
Rarely use elements
Outside of base css files. If something has a title, don't use <h1>, use <div class="title">. If fully semantic HTML is a requirement, you can go back later and change it to <h1 class="title"> and reset any pre-existing h1 styles.
Namespaces
Namespace everything. Like code, try and keep css indenting as flat as possible.
@html
<div class="idea-card">
<div class="idea-card-title">Hello</div>
</div>
@css
.idea-card { ... }
.idea-card-title { ... }
Specificty
If you don't want to namespace everything, use the descendant selector.
@html
<div class="idea-card">
<div class="title">Hello</div>
</div>
@css
.idea-card {
> .title {
...
}
}
Components don't modify margins, only layouts modify margins.
Say you have a card that's displayed in a grid. The layout (grid) should control the padding between the cards, not the definition of the card itself. This means it's easier for the card to be reused elsewhere.
Try to use generic names
Some good ones: list, jumbotron, card. They'll encourage you to make components from your styles and think in terms of patterns.
Variants
If you have an object that needs to be used in multiple places, but are slightly different make a specifier class:
@css
.idea-card { ... }
.idea-card-mini { ... }
@html
<div class="idea-card idea-card-mini">...</div>
Behavior
Don't use CSS classes from Javascript. Don't use .is-* state rules from SMACSS. Use [data-*] selectors instead.
Newlines
For multiple selectors:
.vote,
.user,
.wip {
...
}
Misc points:
- Rarely use the padding/margin full shortcuts. The general shortcuts almost always over-specify.
- Group types of styles (i.e. group all the font stuff together)
- @imports only go at the start of an element.