5 tips for writing better CSS

True, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.

In this article I want to talk about 10 different tips you can write proper and clean css code as well as to start improving yours, as quickly and efficiently as possible.

1. Start with a CSS Reset

Seriously, always use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, or my reset css 😉 just use something. It can be as simple as removing the margin and padding from all elements:

* { margin: 0; padding: 0; } 
html, body, div, span, p, form, label, fieldset, legend, table, caption, tbody, tfoot, thead, tr, th, td h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, a, applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, strong, em, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
text-align: left;
vertical-align: baseline;
font:Tahoma, Times, serif;
}
body {line-height:1.5;}
ol, ul {list-style: none;}

2. Comments your CSS block

You should keeping organize your stylesheet clean and easy to read, comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code. For example, this is how I structure my stylesheets:


/*****Reset*****/  
Remove margin and padding from elements  
  
/*****Basic Elements*****/  
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.  
  
/*****Generic Classes*****/  
Define styles for simple things like floating to the sides, removing a bottombottom margin on elements, etc  
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently   
  
/*****Basic Layout*****/  
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site  
  
/*****Header*****/  
Define all elements in the header  
  
/*****Content*****/  
Define all elements in the content area  
  
/*****Footer*****/  
Define all elements in the footer  
  
/*****Etc*****/  
Continue to define the other sections one by one  

3. Use Useful Naming Conventions

Name your elements based on what they are, not what they look like. For example, .xyzPart is much less versatile than .commentPart, and .postContent is more limiting than .header.

4.Stay consistant

Whatever way you decide to code, stick with it. I am sick and tired of the whole 1 line vs. multiple lines for your CSS debate. There is no debate! Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet. Personally, I use a combination of both. If a selector is going to have more than 3 properties, I break it to multiple lines:

div.header { float: left; width: 100%; }  
div.header div.column { border-right: 1px solid #ccc; float: rightright; margin-right: 50px; padding: 10px; width: 300px; }  
div.header h1 { float: left; position: relative; width: 250px; } 

It works for me because 3 properties is about what fits on 1 line in my text editor before wrapping to another line. So just figure out what works for you and be consistent.

5. Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.
This:

h1, h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

much moreefficient than this

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

You should also make use of shortcuts whenever possible. Always be on the lookout for opportunities to group elements and use declaration shortcuts.
You can accomplish all of this:

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

with only this

h1{
margin: 10px 30px 15px 15px; 
font: bold 12px Arial;
} 

It’s very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. A big clockwise circle, starting at noon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s