CSS

Utilizing CSS Best Practices: Making a Great Blank CSS Template File for Next Projects

Dec 02, 2008 by Mohsen

If you’ve bookmarked a lot about CSS best practices and haven’t started utilizing them, this post will help you to make a better and more organized CSS file using some of CSS best practices. Here I’m making a basic CSS template file for my next projects. Using a standard reset method, defining some basic and handy classes, naming common pages’ sections and more…


You maybe interested in my post about “CSS Skills

Before getting started, make a new folder and name it whatever you like for example “styles“. Then make two files call them “reset.css” and “style.css” and put them into the folder. Your directory structure should be something like this:

–root
|
styles
– reset.css
– style.css
|

1- Use a global CSS reset method and keep it separate

I use this method of Eric Meyer as the base. I just removed “ins”, “del” and “table” selectors because I rarely use them in my markup and also styled “strong” and “em” for some reasons. I know some of you have your own method, so feel free to define your own. After writing reset styles, save the file as “reset.css”.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
} 

I removed the “body” style from reset styles, because often we need to add more styles to the body. We will put it in our style.css file later on.

2- Add a description about the Stylesheet to the top

Now open style.css to write some basic styles in. The first thing you should do when creating a new stylesheet (style.css) is add a structural comment block at the top of your style file to describe the style details such as its version, author, and contact details of the author. This will help both developers and yourself when working with the style file. The details should have essential information such as Author name , Version, and a URL for more info. I prefer to use Wordpress form, It’s really comprehensive.

/*
Theme Name: Rose Theme
URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
*/

3- Define a table of content using sensible chunks

Now, we’re going to define a table of contents for our stylesheet. Defining a TOC makes it easier for other people and you to read and understand your code. You may think that it isn’t necessary at all, but trust me! It’s somehow handy if we use it correctly. How?
first let’s see what it should be like:

[Table Of Contents]

0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer

OK, as you see, I’ve divided the TOC into 10 parts. From 0 to 9.

  • The TOC is very simple and doesn’t take more than 1 minute from you.
  • You don’t need to define a new TOC for every project.
  • The names used are very general and almost cover most of a template sections.
  • No dynamic #ID or .Class is used
  • It isn’t so big and doesn’t need lots of Kbytes!
  • Ordered numbers are useful. see the next tip

4- Separate each section with a fixed style + Use an = Sign

When you visually separate each section, try to use a fixed style. Take a look to the style below. At zero I’ve imported the reset.css file.

/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
 url('reset.css');
/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

Using an = sign plus the section number form TOC will help you (other people) find each section easily. You know we don’t have any equal sign at a stylesheet files. So we can use this to find section immediately. for example if you want to jump into the Form section, simply take a look to TOC and find its number then search by this keyword “=7″. It will take you straight to the Form section of your stylesheet.

5- Define the most common classes

There are some classes that we use very often. Why don’t define all of them once? Now is its time. I added some of my favorite. Put all of them under “=1 Global”.
Also I’ve put the body selector inside global too.

Note: The following classes are just some samples

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}

6- Style links & Headings

Finally, style links with a proper order and also headings because they are essential. If you’re making a web page, you can’t avoid using them!

/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em "Times New Roman", Times, serif;
}
h2 {
font: bold 1.5em "Times New Roman", Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}

The Final style.css Template

/*
Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
.
General comments/License Statement if any.
.

[Table Of Contents]

0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer

*/

/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
 url('reset.css');
/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em "Times New Roman", Times, serif;
}
h2 {
font: bold 1.5em "Times New Roman", Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

Conclusion

Thanks for viewing this article, CSS best practices are helpful if they are used properly. For me, I don’t include any piece of code as reset or anything if they aren’t really useful. Using CSS best practices should help you do your project in a better way not just some rules that take a lot of time and haven’t a big influence on you workflow. Of course this stuff is my personal idea. Do you have anything to add? let me know.

Download Source Files

Download CSS Blank Template

Stay Updated

Popularity: 9% [?]

Related Posts

Don't miss any post, Subscribe to our to stay up to date
( Add your comment )

User Comments

  • inerd says:

    i thats agreat head up for the best practice, could be very useful u know. nice post

    Reply
  • CSS Fail says:

    What’s with all the presentation specific classnames? .bold, .underline, .itallic .justify, .left, etc… Seriously, fail.

    Reply
  • CSS Double Fail says:

    Yeah, I’d like to know the answer to that question as well.

    Reply
  • Ralph says:

    You lost me at step 5.

    Seriously, it’s almost 2009. You’d think would get the whole presentation x separation thing by now.

    Reply
  • Ralph says:

    I meant separation of content and presentation…

    Reply
  • Mohsen says:

    As I said in the post, I’ve included some of classes that I use somewhere and this post doesn’t want to make a solid blank template for everyone. This post wants to help organizing a better CSS blank template.

    Reply
  • Rob Hofker says:

    The idea is interesting and I had some hope after seeing the title of the post.
    And then you missed the nail a couple of times when the hammer came down and as a result the idea is buried in critical notes.

    I am a firm believer of using a reset stylesheet to first level the playing field for all browsers and make sure that I have to implement all necessary styling. I also like to use Eric Meyer’s implementation.
    The idea of having a start set of styling is something I liked about the idea. A thing like .clearfix is something I use in almost any project. And there are more like these. I almost always use a .right and a .left class.

    But there a some points where you completely lose me:

    - I do add a bit of comment into my stylesheets, but I limit that and do not add lines of comments and commented headers throughout the file; that just adds many bytes to the files;

    - using styles like .italic to only set the font-style property to italic makes me fear that your adding a lot of css classes to your html content that most probably can be done in another way

    - taking styles out of the reset stylesheet because you know you will always style them seems to me that you are missing the point of the reset stylesheet. If you would really continue that approach you would end up with an empty reset stylesheet …

    - the C in CSS stands for cascading style sheets and I would suggest to strip out repetitions of styling. You set the font for the body, so all children within the body use that font setting. Still when setting the header styles you repeat the setting for h3, h4 and h5. (Also have look at the way you have defined the font-family differently)

    - on top of the previous remark I would also pull things more closely together by combining the common settings and then separately setting the differences:
    h1, h2, h3, h4, h5 {font-style:bold;}
    h1 {font-size: 2em; font-family: “Times New Roman”, Times, serif;}
    h2 {font-size: 1.5em; font-family: “Times New Roman”, Times, serif;}
    h3 {font-size: 1.2em;}
    h4 {font-size: 1em;}
    h5 {font-size: .9em;}

    - but most the styles and / or sections you have put in your style sheet are already very project specific that you may limit yourself in your design solution to the sections you have already defined. You may not have or need a header or a middle or extra section in your page …

    All in all a thought provoking post and one I will keep in mind and ponder about using it in next projects.

    Reply
  • Mohsen says:

    @ Rob Hofker Thanks for your comprehensive comment!
    I agree with you at some points but as I said the post isn’t going to teach anything about styling using CSS for example about how to style headings. So I haven’t styled h1,..h5 completely. The title says “style links & heading” not “how to style links & headings”.
    This post wants to help organizing a better CSS blank template with your own styles, classes, reset method and etc.

    Thanks again for your comment.

    Reply
  • Very interesting, I like how you set them all up, its a great thing to have handy instead of going around and copy/pasting files from your old projects.

    Ryan

    Reply
  • thank you for this useful post

    Reply
  • Timothy says:

    I like to minify CSS files for my project. I have a reset.css file which I keep in a compressed and uncompressed state. The compressed is what is included, to reduce the filesize (quite drastically I may add).

    And, after I finish my other style sheets for a site I then compress those and keep both copies (the site includes the compressed version).

    To do this I use the YUI Compressor. It works even better on JavaScript files.

    Reply
  • for the beginners this tutorial is a real help. quite merged and cleanly understandable to the users. Thanks

    Reply
  • Mel says:

    FAIL

    This article should be called…

    CSS Worst Practice: Making a Crappy CSS Template File for Next Projects

    Seriously your Global styles are all presentational classes this is BAD BAD BAD

    Reply
  • Daniel D. says:

    Well… I agree with Mel when she said this produces crappy css. But I think it is a matter of taste. I would never start like this but to have your very own css skeleton will fit to your style of work… if you know what I mean. Every professional webdesigner already has such a css skeleton, so I think this is only for beginners and / or for inspiration. It can’t and should’t fit to all webdesigner’s minds.

    There are many other ways which are much better to compose generic css files.

    Best,

    Daniel

    Reply
  • kepenk says:

    Thanks, this is so usefull.

    Reply
  • Barbaros Alp says:

    You cant get these classes like “justify,hide,bold,italic” etc to another css file and call it “global.css” then import it your style.css. Then it gets clearer.

    Thanks

    Reply
  • Barbaros Alp says:

    Correction

    You can get these classes like “justify,hide,bold,italic” etc to another css file and call it “global.css” then import it your style.css. Then it gets clearer.

    Thanks

    Reply
  • JMB says:

    The classic “reset” is a waste of time IMO. You almost always end up overriding these reset styles anyway so you just create unnecessary overhead for the rendering agent. The * universal selector reset is particularly guilty in this regard.

    These days I do use a reset of sorts, but its more for things like form elements, tables, system messages and admin specific functions in my sites admin sections, and these are all in separate sheets & tweaked on a per theme/site basis.

    Reply
  • Looking past the content of the CSS, I’m actually kind of intrigued by the idea of a comment-driven table of contents in a CSS file. It doesn’t feel intuitive, but it reminds me of some of the other clean coding practices I’ve adopted over that years. Many of them also felt uncomfortable at first, and turned out to be very helpful when I had to step back into a project after a year or more away.

    Reply

Add Your Comment

Trackbacks/Pingbacks