1.

Semicolons

While the semicolon is technically a separator in CSS, always treat it as a terminator.

div {
color: red;
}

2. Box model

The box model should ideally be the same for the entire document. 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: 10px;
box-sizing: border-box;
}

/* good */
div {
padding: 10px;
}

3. Flow

Don't change the default behavior of an element if you can avoid it. Keep elements in the
natural document flow as much as you can. 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;
}
Similarly, don't take an element off the flow if you can avoid it.

/* bad */
div {
width: 100px;
position: absolute;
 right: 0;
}

/* good */
div {
width: 100px;
margin-left: auto;
}

4. Positioning

There are many ways to position elements in CSS but try to restrict yourself to the
properties/values below. By order of preference:

display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

5. Selectors

Minimize selectors tightly coupled to the DOM. Consider adding a class to the elements you
want to match when your selector exceeds 3 structural pseudo-classes, descendant or
sibling combinators.

/* bad */
div:first-of-type :last-child > p ~ *

/* good */
div:first-of-type .info
Avoid overloading your selectors when you don't need to.

/* bad */
img[src$=svg], ul > li:first-child {
opacity: 0;
}

/* good */
[src$=svg], ul > :first-child {
opacity: 0;
}
 6. Specificity

Don't make values and selectors hard to override. 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;
}

7. Overriding

Overriding styles makes selectors and debugging harder. Avoid it when possible.

/* bad */
li {
visibility: hidden;
}
li:first-child {
visibility: visible;
}

/* good */
li + li {
visibility: hidden;
}

8. Inheritance

Don't duplicate style declarations that can be inherited.

/* bad */
div h1, div p {
text-shadow: 0 1px 0 #fff;
}

/* good */
div {
text-shadow: 0 1px 0 #fff;
}

9. Brevity

Keep your code terse. Use shorthand properties and avoid using multiple properties when
it's not needed.

/* bad */
div {
transition: all 1s;
top: 50%;
margin-top: -10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}

/* good */
div {
transition: 1s;
top: calc(50% - 10px);
padding: 5px 10px 20px;
}

10. Language

Prefer English over math.

/* bad */
:nth-child(2n + 1) {
transform: rotate(360deg);
}

/* good */
:nth-child(odd) {
transform: rotate(1turn);
}

11. Vendor prefixes

Kill obsolete vendor prefixes aggressively. If you need to use them, insert them before the
standard property.

/* bad */
div {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
}

/* good */
div {
-webkit-transform: scale(2);
transform: scale(2);
transition: 1s;
}

12. Animations

Favor transitions over animations. Avoid animating other properties

than opacity and transform.
/* bad */
div:hover {
animation: move 1s forwards;
}
@keyframes move {
100% {
margin-left: 100px;
}
}

/* good */
div:hover {
transition: 1s;
transform: translateX(100px);
}

13. Units

Use unitless values when you can. Favor rem if you use relative units. Prefer seconds over
milliseconds.
/* bad */
div {
margin: 0px;
font-size: .9em;
line-height: 22px;
 transition: 500ms;
}

/* good */
div {
margin: 0;
font-size: .9rem;
line-height: 1.5;
transition: .5s;
}

14. Colors

If you need transparency, use rgba. Otherwise, always use the hexadecimal format.
/* bad */
div {
color: hsl(103, 54%, 43%);
}

/* good */
div {
color: #5a3;
}

15. Drawing

Avoid HTTP requests when the resources are easily replicable with CSS.

/* bad */
div::before {
content: url(white-circle.svg);
}

/* good */
div::before {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
}