CSS Best Practices and What to Avoid

Cascading Style Sheets (CSS ) are a type of language used to change the format and look of documents written. There are different types of CSS - these are external style sheets, internal styling and inline styling and they are supported on all browsers.

It’s really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Whatever the case may be, I guess there are some things you are unaware of or doing wrong. Here are some few tips to help you write a clean, easy-to-edit and validated CSS codes.


Provide Stylesheet Information

It's very important that you provide necessary information concerning when writing you stylesheet. When others need to ask question concerning your CSS, having a contact information above your code will serve as reference to others.

/* -----------------------------------------------
Blogger Template Style
Name:     Picture Window
Designer: Durodola Ridwan
URL:      www.realcombiz.com
Tags:     Magazine
----------------------------------------------- */

Organize Your Stylesheet (Top-Bottom)

It always makes a whole lot of sense keeping things organized, it doesn't only stay with your style sheet. You might get a hard time finding some part of your code if it isn't organized. I do recommend a top-down format that tackles styles as they appear in the source code.

/****** General Styles *********/
body {
}
h1, h2, h3 {
}
p {
}
a {
}
/****** Header Style *********/
#header {
}
/****** Navigation Style *********/
#nav {
}
/****** Comments Style *********/
#comments {
}
/****** Footer Style *********/
#footer {
}

Use CSS Reset

Most CSS frameworks have a reset built-in, but in case yours is not having, consider implementing it. Styles like margins, paddings, line heights, headings, font sizes and so on may look different on different browsers. The goal of a reset style sheet is to reduce browser inconsistencies by providing general styles that can be edited and extended.

Some of the available popular reset is MeyerWeb and normalize.css. You just need to include it in your HTML file under head section, so that it won't replace your own style definitions.


Use Hyphens Instead of Underscores

Using underscores might give you unnecessary results on old browsers. For better backward compatibility, get into the habit of using hyphens instead.

For example:

.comment_box{
margin: 0;
padding: 0;
}

This is better:

.comment-box{
margin: 0;
padding: 0;
}

Use CSS Vendor Prefixed

If you are familiar or have been experimenting with CSS3, you must be aware that each browser has its own specification when it comes to a specific style. Using vendor prefixes make sure each browser supports the specific features/style you specified.

For example, if you want to apply CSS3 transition to any element, you will be using something like this:

-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

Keep It Simple and Clean

One is the best CSS practice is to keep your code clean and simple as possible. Group items sharing the same properties like font-size, margins, paddings, colors and so on. Instead of repeating yourself:

h1 {
color: #000;
padding: 1px 2px 3px 4px;
margin: 1px 2px 3px 4px;
font-size: 1em;
}
h2 {
color: #000;
padding: 1px 2px 3px 4px;
margin: 1px 2px 3px 4px;
font-size: 1em;
}

It will make sense if you do it this way:

h1, h2 {
color: #000;
padding: 1px 2px 3px 4px;
margin: 1px 2px 3px 4px;
font-size: 1em;
}

Shrinking your code and combining it in one line will make your code more readable and makes the loading of the browsers faster.

Instead of doing this:

h1 {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}

You should do this:

h1 {
margin: 1px 2px 3px 4px;
}

Also, if your top and bottom, or left and right attributes are having the same values, use this:

margin: 2px 4px;

In-place of this:

margin: 2px 4px 2px 4px;

Use Hex Code instead of Name Color

According to a performance test run by Sean Connon, Senior Web Developer at Alien Creations, Inc, hex codes seems to be just barely faster on 4/5 runs. You can check the performance report here.


Comment your CSS

Just like any other language, it's a great idea to comment your code in sections, so as to close room for queries. To add a comment, simply add /* behind the comment, and */ to close it, like so:

/* Your comment goes here */

Proper Naming Convention

Using proper naming conventions on IDs and classes will make a lot of sense to your work. I find myself editing my template every time, so for me to easily locate any part of my stylesheet, i try as mush as possible to use proper name convention.

It's obvious that using a class name like large-fonts or title-green doesn't make any sense. Always name your elements based on their use not on their properties such as color or size of the element.


Avoid Using Large Image

Using a large image as a background have a huge impact on slow loading. It is a good practice to use smaller images if possible and apply repeat CSS properties where needed.

body {
background: url(bg.jpg) repeat-x;
}

If you want the image to repeat itself across the whole container, don't provide any conditional statement. repeat-x will repeat the across the horizontal length and repeat-y will repeat it across the vertical length.


Don't use Negative Margins to Hide Your h1

I have see so many people using image as header and then either use negative margin to move the header text off the page or use display:none; to hide it. Matt Cutts, the head of Google's Webspam Team, has officially said that this is a bad idea, as Google might think it's spam.

While some developers support the act, i usually advise most developers to stay-off this practice, so as to stay on the safe side.

Avoid Extra Selectors

It's easy to unknowingly add extra selectors to our CSS that clutters the stylesheet. One common example of adding extra selectors is with lists:

body #container .extraclass li {....}

You don't need that extra selectors, .extraclass li will work just fine:

.someclass li {...}

Add Margins and Padding to All Elements

If you are not using CSS reset, you might want to define the margin and padding for all elements on the page. Incase you are not aware - Different browsers render elements differently. IE renders certain elements differently from Firefox and Chrome. Likewise, IE of different version renders element differently.
So it becomes a need for you to set all elements margin and padding value to zero. Unless an element is given another style, all undefined element will be reset to zero:

For example:

* {margin:0;padding:0;}

Use CSS Compressors

CSS compressors help shrink CSS file size by removing line breaks, white spaces, and combining elements. Through this, you can help browsers to speed up the loading of your CSS codes. CSS Optimizer and CSS Compressor are the widely used CSS compressor on the web.


Validate Your CSS

If things are not coming out as planned with the code, it can be frustrating and time consuming troubleshooting it manually. Sometimes, missing something as small as semi-colon might cause you a lot. So, to save you more time and headache, we recommend W3C's CSS validator, which will you to quickly spot any error within your style sheet.

We can't really guaranty that only the above mentioned CSS best practice is all you need to write a better code. But we think that's the area where most developers fail and it worth looking to. Queries or contributions are welcome.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz