CSS Practices That Shouldn’t Be Overlooked By Beginners

Learning CSS is a must these days and almost all of us were at the point where CSS was a big enigma and we had to learn it bit by bit. The easiest way to learn it is by making a website. With the help of good old trial and error you can learn it without reading 700 pages from CSS learning books where there’s more editorial text than direct explanations for a piece of code.

However, trial and error is good as long as you’ve learned the basics of CSS, otherwise you might end up writing bad code and not figuring out why it doesn’t deliver the expected result.

I tried in this article to write about a few of the basic CSS practices that must be taken into consideration by CSS beginners when writing a piece of code for a website.

Specify and use the right doctype

A lot of people are saying that a HTML without a doctype is like a book without cover because not only you don’t know what’s in it, but everything falls apart. The right doctype declaration must be made in order to have your markup and CSS valid.

There are a few doctypes available like HTML 2.0, 3.0, 3.2, 4.01 Strict, 4.01 Transitional, 4.01 Frameset, XHTML 1.0 Transitional/Strict/Frameset, but the only doctype I advise you to use is:

<!DOCTYPE html>

I’m using the HTML5 doctype that you see above for all my new projects and it works like a charm because most of the times, especially in tech, new is better.

Specify units for values except when the value is zero

margin: 0px; /* wrong */  
margin: 0em; /* wrong */  
margin: 0; /* ok */  

For people who are asking why the explanation is quite simple, zero is always zero.

Use external stylesheets

<link rel="stylesheet" type="text/css" href="style.css" />

The project isn’t final even when it’s final and you will have to make changes to it even if you think it is flawless. To make these changes easily, it is better to use an external stylesheet, and not an embedded or an inline one.

Don’t use a trillion style sheets

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
<link rel="stylesheet" type="text/css" href="style3.css" />
<link rel="stylesheet" type="text/css" href="style4.css" />
<link rel="stylesheet" type="text/css" href="style5.css" />

<!-- Why would you even...? -->

You have to keep in mind that every stylesheet is a call to the server and every call slows down the loading time of the page. Many use import in a main CSS instead of many link lines in the head of the html, but that is pointless. It does the same thing and is wrong.

Use a CSS reset properly

CSS reset is used to avoid browser inconsistencies, like margins, line-heights, padding and other attributes. By using CSS reset you are making sure your page looks the same on all browsers. However, you shouldn’t include or copy paste the whole reset, just the attributes that you are using and restyling.

Here are three of the best CSS reset stylesheets that you can use:

Eric Meyer’s CSS Reset

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

HTML5 Doctor CSS Reset

/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

Yahoo! (YUI 3) Reset CSS

/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

Avoid using !important

This value is really not that good as you might think because it turns styles on and overrides the cascade order which means that it can be very difficult to override.

Use em instead of px

I know it seems easier to use px, but using relative sizes such as ems makes it easier to scale text sizes on the page uniformly and keeps better typographic rhythm. There’s a huge debate, or better said, argument around this issue, but I’ll only tell you that using em is the way you will design better and easier for various browser sizes and mobile devices. Considering that the responsive movement is increasing, you should just get on with using em.

Use shorthand properties

The short hand properties allow you to set multiple values to a single property. This makes things easier to edit and it also reduces the size of the CSS.

/* Use */

font: italic small-caps bold 1em/140% "PT Sans", Arial, Helvetica, sans-serif;

/* Instead of */

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"PT Sans", Arial, Helvetica, sans-serif;

/* and this */

margin: 1em 0.6em 0 0.5em;

/* instead of this */

margin-left:0.5em;
margin-right:0.6em;
margin-top: 1em;

Minify your CSS

Faster page loading speeds make a better user experience and also keeps the server load lighter. While developing the site you should have your code as readable as possible, but when launched, the code must be minified. There are several CSS compressors that you can use among which you can find: csscompressor.com, cssminifier.com and YUI JS/CSS compressor.

Organize your stylesheet

Like I previously said, there will always be modifications to the code and you shouldn’t waste time searching for a div that you can edit. The best way to improve your workflow is to have your stylesheet organized: generic classes like body, a, h1 etc. first and then the divs and classes in the order in which they appear in html.

Combine elements

Try to do everything with as little code as possible and if there are elements in your stylesheet that share properties, combine them.

/* Use this */

.cat_design, .cat_dev, .cat_mobile {float:left; font-size: 0.625em; margin: 0.3em 0 0 1em;color: #fff; border: none; text-align:center;}
.cat_design{background: #f54c69;}
.cat_dev{background: #725eed;}
.cat_mobile{background: #1299e8;}

/* Instead of this */
.cat_design, .cat_dev, .cat_mobile {float:left; font-size: 0.625em; margin: 0.3em 0 0 1em;color: #fff; border: none; text-align:center;background: #f54c69;}
.cat_dev, .cat_mobile, .cat_misc {float:left; font-size: 0.625em; margin: 0.3em 0 0 1em;color: #fff; border: none; text-align:center;background: #725eed;}
.cat_mobile {float:left; font-size: 0.625em; margin: 0.3em 0 0 1em;color: #fff; border: none; text-align:center;background: #1299e8;}

Validate your CSS

Even if you might think there’s absolutely nothing wrong with your CSS, there might be a chance that you have written something incorrectly so validating your CSS is the first step in making sure your code is in good shape and the website isn’t displayed improperly due to a CSS error.

Use a web developer tool

I’ve been using Firebug since forever and it is incredibly easy for me to spot problems within my websites. With it as well as with Google Chrome’s Developer Tools, you can inspect the HTML and modify the style and layout in real-time. This is a must have and you should create or modifying any website without using.

 
 
 
 
 

Sponsors