Here I’ll be sharing my personal favourite way to format a stylesheet.

Each to their own


The way you format and order a stylesheet can change from project to project. Indeed there might even be a set in stone house style that you must adhere to in a certain job.

However when I have the freedom to set out my own formatting I like to stick to the following rules.


Broad Order

First up you should place your reset CSS and any global styling you want to do to the body.

* {
border: 0;
margin: 0;
padding: 0;
}

body {
background: #f7f7f7;
font-family: 'Abel', sans-serif;
font-size: 20px;
}

This gives you a global base style right away that you can work on you go down the stylesheet. (After all the C in CSS stands for cascading.)

Then I like to style all the main HTML elements, header, nav, h1, div, p, a etc.

h1 {
color: #2F2F2F;
font-size: 70%;
}

div {
margin: 0 auto;
text-align: center;
}

Again you are working in a top down order. Almost backward to how CSS priority works. (Base elements have a lower priority than classes and id’s, and so should be defined first.)

Up next should be classes that are general use site-wide, for example, I usually have classes, for certain defined widths and alignemnts.

.wide-width {
width: 768px;
}

.center-element {
margin: 0 auto;
}

.highlight-text {
color: red;
}

Now normally a lot of developers will simply continue in this vein, all classes, all id’s and then unique selectors like elements within a class, or elements within an id.

However I like to style the unique elements (Mostly Id’s but some classes) by site sections.

So after getting the global elements and classes out of the way. I will now seperate my stylesheet, by Page, and page section. For example, Home title, Home splash, home contact etc.

/*---------------- TOP NAVIGATION BAR -----------*/
div#top-navigation {
max-width: 768px;
}

#site-logo {
float: left;
margin: 22px 0 0 33px;
text-decoration: none;
}

/* Hidden Menu Icon For Mobile */
#nav-collapsed {
backgrond: url(img/nav.png) center no-repeat;
display: none;
}

This allows me to style the unique elements in an order that makes sense, and is easy to locate in the file.

One final tip that i highly recommend is to order your CSS attributes within an element in alphabetical order. This mean that is an element has a lot of styling content, it is super simple and quick to find the attribute you are looking for to make the edit.

#experience-text {
color: #373737;
font-size: 60%;
font-weight: bold;
left: 0;
letter-spacing: 1px;
margin: 63px auto;
position: absolute;
text-align: center;
top: 0;
width: 75px;
}

It makes a big difference as you can see from the example above, allowing the developer to find the attribute they are looking for easily.

Thats it for this entry, I hope it helped!

~
Idris