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
Stay Updated
Popularity: 5% [?]
6:46 pm on December 2nd, 2008
i thats agreat head up for the best practice, could be very useful u know. nice post
9:29 pm on December 2nd, 2008
What’s with all the presentation specific classnames? .bold, .underline, .itallic .justify, .left, etc… Seriously, fail.
11:17 pm on December 2nd, 2008
Yeah, I’d like to know the answer to that question as well.
2:26 am on December 3rd, 2008
You lost me at step 5.
Seriously, it’s almost 2009. You’d think would get the whole presentation x separation thing by now.
2:26 am on December 3rd, 2008
I meant separation of content and presentation…
4:52 am on December 3rd, 2008
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.
8:40 am on December 3rd, 2008
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.
8:56 am on December 3rd, 2008
@ 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.
1:49 pm on December 3rd, 2008
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
2:46 pm on December 3rd, 2008
thank you for this useful post
5:30 pm on December 3rd, 2008
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.
8:27 pm on December 3rd, 2008
for the beginners this tutorial is a real help. quite merged and cleanly understandable to the users. Thanks
8:50 pm on December 3rd, 2008
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
12:19 pm on December 4th, 2008
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
12:34 pm on December 4th, 2008
Thanks, this is so usefull.
9:09 pm on December 4th, 2008
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
9:09 pm on December 4th, 2008
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
4:02 pm on December 8th, 2008
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.