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

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”.

[sourcecode language=’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;
} [/sourcecode]

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.
[sourcecode language=’css’]/*
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
*/[/sourcecode]

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:
[sourcecode language=’css’]
[Table Of Contents]

0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer
[/sourcecode]
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.

[sourcecode language=’css’]/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(‘reset.css’);
/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
[/sourcecode]

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
[sourcecode language=’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%;
}
[/sourcecode]

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!
[sourcecode language=’css’]
/* =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;
}[/sourcecode]

The Final style.css Template

[sourcecode language=’css’]
/*
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
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import 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
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
[/sourcecode]

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

Subscribe to acomment.net to stay updated

Leave a comment