Hosting Geared For
your CMSMS needs

Hosting Starting at $15

• Hosted Mail
• Personal Control Panel
• CMSMS 1.8.1 tested
• Lightly packed servers
• Intrusion Detection
• URL monitored
• Custom solutions available

CP Blogs

Good CSS rules of thumb

Posted by: Jeremy Bass

on May 3, 2009

Category:

Basics, Presentation, CSS, HTML

Summary:

Like any other coding you need to be commenting your stylesheet which makes it much easier to find the information and commands you're looking for.

Ad Space

Commenting your stylesheet

Like any other coding you need to be commenting your stylesheet which makes it much easier to find the information and commands you're looking for.

Now if your mind full you will end up with one one stylesheet, so put big marks that will stand out as you scroll down the page... This is a race you know. /**************************************************/
/**************************************************/

Meaningful comments include:

Last updated - This information can quickly let developers know about recent changes made to the file:
/**************************************************/
/**************************************************/
/*Updated: Thu 1 Jan 2008
Author: John Doe
Updates: Add new section 'Forum'*/
/**************************************************/
/**************************************************/
References - Comments can also be used as a quick reference for the main style guides applied throughout the site:
/**************************************************/
/**************************************************/
/* Color Palette
Body Background: #FFF
Main Text: #CCC
Link: #F0
etc ...
*/ /**************************************************/
/**************************************************/
Organization - Use comments to identify the different sections of the stylesheet:
/**************************************************/
/**************************************************/
/**************** HEADER *********************/
/**************************************************/
/**************************************************/

/**************************************************/
/**************************************************/
/**************** Footer *********************/
/**************************************************/
/**************************************************/
Reminders and notes - Leaving reminders and notes for yourself and other developers can help avoid confusion later:
/* The width is overwritten for IE 6 in: cssIE.css */
div {width: 250px;}

Define general rules and main classes at the top of the stylesheet

Set the styles of generic HTML elements, for example:

body
   {
   background: #fff;
   font: arial, sans-serif   75%;
   }
   h1 {
   font-size: 1.2em;
   color: #000;
   }
   h2   {
   font-size: 1em;
   color: #f0f0f0;
   }
   img {border: 0;
   }

Then, list the classes that will be most commonly used across the site, for example:

.hide
   {
   position: absolute;
   left: -9000px;
   }
   .required   {
   background: url(#) no-repeat 100% 0;
   }
   .fl
   {
   float:   left;
   }
   .fr
   {
   float: right;
   }

Use Short Hand

Short hand can save bit that you will no doughty want to use on a img.

here is an ex:

#primary-nav li.sectionheader {
   border-left: 1px solid #006699; 
   border-top: 1px solid #006699; 
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0.5em;
   background-color: #fff;
   margin: 0;
   width: 100%;
   }

Order the CSS in the same order as the HTML

The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to locate how an element is being styled.

Know when to use elements, ids and classes

Using the correct selector type means your CSS file can be significantly reduced in size:

Elements - Elements such as body, (<body>), paragraphs, (<p>) and headings, (<h1>,<h2> etc.) should be used to define general rules
Ids - These are unique identifiers and should only be used once within a document. Ids should be used to style major structural sections of a web page such as the header or the footer.
Classes - These can be used on any type of HTML element.

Too many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as possible by referencing elements and/or ids by nesting the selectors.

Imagine the following HTML code:

<ul id="nav">
<li><a href="#">Item 1</a></li>
</ul>

Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:

#nav { properties listed here }
#nav li { properties listed here }
#nav li a { properties listed here }

Name classes and ids logically

Don't name classes and ids based on their color or position as these may change in time and if you working with someone... they'll think your not up to the task. Try and give them a name that's likely to remain relevant over time.

Use a common naming system for your classes and ids. It will save a lot of time and confusion when developing, debugging and updating documents.

This is my practice... I almost never use id's... But why? Well it's simple, I work with CMS's all the time, and jQuery as well. So what happens if I use an id in on template and the same id in another, but then I need to pull both templates at the same time.. Now I have two id's on the same page... not so good. Simple fix thou, just don't just id's.

Group selectors with common CSS declarations

You can avoid specifying the same set of properties several times by grouping the selectors that share the same CSS declarations together. For example:

h1, h2, h3
{
color: black;
padding: .2em;
}

Nest CSS selectors

By nesting CSS selectors (i.e. using more than one CSS selector in one command) we can apply styles by navigating the HTML document tree. For example, to apply a colour of red to all paragraphs within a div, we can use the following rule:

div p {color: red;}

Take advantage of inheritance

Some CSS commands inherit from their parents whereas others don't. The use of nesting means you don't have to declare the same properties over and over again.

Generally speaking, text-related CSS< commands (e.g. font-size, color) are inherited by descendant elements, whereas layout-related commands (e.g. float, width) aren't inherited .

Use Versions for you new CSS file

If you do any of the E-tag and Expires trick you'll have to take care of your file naming practices as well. I suggest something like this, Master.1.0.0.css

Minify your file!

Hey you want nice pictures right? Well you can't have 60kb CSS files, Even if you file is 10kb when you minify it can go down to 2-3kb. What your doing is striping out all unnecessary stuff and saving those bit for something else...