Alphabetize your CSS properties, for crying out loud

Other Conventions

.sample--logical {
height: 200px;
width: 100%;
position: absolute;
top: 20px;
left: 0px;
}
.sample--random {
color: red;
top: 20px;
height: 200px;
width: 100%;
left: 0px;
position: absolute;
background: blue;
}
.legacy {
background: red;
color: blue;
margin: 0 0 20px;
padding: 20px;
height: 20px;
position: relative;
padding: 30px; // Duplicate
display: inline-block;
margin: 10px 0 30px; // Duplicate
}
.sample--length {
margin: 20px 50px;
background: red;
color: yellow;
width: 100%;
top: 0px;
}
.sample--property-length {
background: red;
margin: 20px 50px;
color: blue;
width: 100%;
top: 0px;
}

Alphabetical for President

.sample-alphabetical {
background: red;
color: blue;
font-size: 1.6rem;
height: 200px;
left: 0;
line-height: 1.5;
margin: 10px 0;
padding: 0 20px;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
Jack
Jacob
Jacqueline
Jacques
Jake
Jared
Jazz
Jeffery
Jerry
John
Juan

What about vendor prefixes?

Any Cons?

.oops {
background: red;
color: blue;
left: 0; // This is still here
margin: 0;
padding: 0;
position: absolute;
right: 0; // Trying to move to the right
z-index: 1;
}

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jerry Low

Jerry Low

Front-end engineer by day, front-end designer by night and Batman all of the time at Findem #vancouver.