HTML and CSS: general site architecture and good practices

CSS organization:


– reset.css (or normalize.css)

– layout.css (any grid system you are throwing in goes here)

– typography.css (your fonts stuff)

– utilities.css (OOCSS stuff, things that may be easier to just define a class for instead of rules below, like .left { float: left}, or .mtl { margin-top: 20px } See this and pic and choose the ones not cover in other sections that you may need.

– zindexmap.css (this file does not contain any css, just a commented out section where you ┬áspecify all the elements using zindex, and the values), it is quite useful to avoid the z-index wars


– buttons.css


– list.css (and so on, you get the idea)


– footer.css

– header.css

– navbar.css (you get the idea, not atomic components like buttons, but more general sections.


– aboutus.css (page specific stuff, one offs, overrides to generic rules, themes)

Make sure your production scripts are making all of these files into one.

Other tips:

1) Inside each file, at the top, put a CSS map, so you know if a section you are adding / modifying is already there. Something like:

/* Contents

– Header

– some section

– some other section

– footer stuff


And then, make sure the sections correspond with the headers above. That will help you keep bloat out

2) Avoid long selectors! Favor specificity by classes. For example, instead of:

#my_container section div p a.my_link


#my_container .my link (or just plain .my_link)

It is easier to fall in this trap specially if you are using css precompilers like sass. The reason you should be mindful of this:

– Better performance of your CSS

– You avoid specificity wars. Protect via container ids, not long strings of HTML elements

3) Always aim to reuse. Try to drive your work off a designer’s stylesheet, so you don’t have to “recreate” styles per pages / sections. If one is not provided, ask for one. If not possible, avoid the temptation to create “one offs” everywhere to accomplish stuff, constantly go back to your base classes and look for what you need, or what you don’t anymore.

4) At coding time: make the HTML do as much of the Layout / styling as possible. For example, as basic as it sounds, put content in

instead of a more generic

if the text is really to be used as a paragraph.

Leave a comment

Your email address will not be published. Required fields are marked *