Categorizing Rules
If I write CSS / SCSS I want to set rules for all kind of stuff. Because of this I have rules for categorizing my styles.
Box
margin, padding, display, etc.
Border & Background
border, border-radius, background, etc.
Text
color, font-size, font-weight, etc.
Other stuff
animations, transforms, transitions, etc.
Box model
A global * { box-sizing: border-box; } is fine, but don't change the default box model on specific elements if you can avoid it./* bad */
div {
width: 100%;
padding: 25px;
box-sizing: border-box;
}
/* good */ * { box-sizing: border-box; }
div {
padding: 25px;
}
Flow
For example, removing the white-space below an image shouldn't make you change its default display.
/* bad */
img {
display: block;
}
/* good */
img {
vertical-align: middle;
}
Specificity
Avoid !important. Minimize the use
of id's and avoid !important.
/* bad */
.bar {
color: green !important;
}
.foo {
color: red;
}
/* good */
.foo.bar {
color: green;
}
.foo {
color: red;
}
Units
Use unitless values when you can. Favour rem
if you use relative units.
/* bad */
div {
margin: 0px;
font-size: 1.2em;
line-height: 22px;
}
/* good */
div {
margin: 0;
font-size: 1.2rem;
line-height: 2;
}
That’s all, Folks
