Tutorials

5 Step Style Sheet Weight Loss Program

Tags: Beginner

Does your style sheet ever feel bloated and overweight? If you notice some love handles growing on your style sheets, it may be time to stop and give it a good make over. Learn the following steps and your style sheet will be in shape in no time.

Step #1 – Learn How to Group Selectors

What is a Selector?
For those who are not familiar with the term “selector” you can refer to this quick overview of CSS syntax by w3schools.com.

Un-Optimized CSS Code
In this example, you will see the same properties within 3 different selectors.

Optimized CSS Code
You can optimize the above css by grouping selectors that have the same properties. Each selector should be separated with a comma, see below for an example:

h2, p, .block {
	font-size: 1.5em;
	padding: 10px 10px 10px 25px;
	margin: 10px 0;
	border: 1px solid #ddd;
	background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}

Step #2 – Learn Specificity

What is CSS Specificity?
Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup. – Juicy Studio – Selector Specificity

Un-Optimized CSS Code
It’s important to understand the different levels of importance in the specificity rules. Writing the same level of css rules will lead to style conflicts and code redundancy.

Optimized CSS Code
When you fully understand CSS Specificity, you can reduce code by combining its common properties and specifying its importance for the unique values. You will soon find clever ways to start optimizing your code, mixing and matching as you move along. Here is a simple example of how to optimize the code above using CSS Specificity.

h2 {
	font-size: 1.5em;
	padding: 10px 10px 10px 25px;
	margin: 10px 0;
	border: 1px solid #ddd;
	background: #f0f0f0 no-repeat 5px 10px;
}

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}

#featured h2.twitter {
	background-color: #fffdd7;
	border: 1px solid #ddd991;
}

Related Articles

• HTML Dog – Specificity
• Smashing Magazine – Things You Should Know
• CSS Tricks – Specifics on CSS Specificity
• Jonathan Snook – Understanding CSS Specificity

Step #3 – Learn How to Combine Classes & IDs

On a related note, you can also optimize your CSS and HTML markup by mix and matching Classes and IDs. Keep in mind that by adding multiple classes on one element, you are able to combine various properties together to get the results you are looking for. Assigning IDs in the right places also allows more control over your styles.
HTML

<div id="featured">
	<h2 class="best double">Best of</h2>
	<h2 class="fav double">Popular Posts</h2>
</div>
<div id="disable">
	<h2 class="comments double">Comments</h2>
	<h2 class="twitter double">Twitter</h2>
</div>

CSS

...

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
h2.tools {background-image: url(wrench_screwdriver.gif);}

h2.double {
	width: 263px;
	float: left;
	margin: 0;
}
#featured h2.double {
	background-color: #ffe2e2;
}
#disable h2 {
	filter:alpha(opacity=40);
	opacity:.40;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	background-color: #d5d5d5;
}

Step #4 – Learn CSS Shorthand

Shorthands allow you to specify the values of several properties with a single property. Since this topic has been covered many times by various blogs, please check out the links below for examples.

Related Articles

• Sitepoint – Introduction to CSS Shorthand
• 456 Berea St – Efficient CSS with Shorthand Properties
• Leigeber – CSS Short Hand Cheat Sheet

Step #5 – Break Apart Your Style Sheet – @import

When working on a large site, the style sheet is going to be packed with full instructions for the site layout and presentation. To get organized and to break apart your massive style sheet into modules, you can use the @import technique to import your various styles.

HTML
Just like you would normally call your style sheet…

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

CSS – styles.css
Your initial styles.css file will act as your master style sheet and will call your other style sheets. (*I nested the other styles in the ‘styles’ folder for organizational purposes. This is a personal preference, you make the choice.)

@import "styles/main.css";
@import "styles/checkout.css";
@import "styles/shoppingcart.css";

Related Article

• A List Apart – Progressive Enhancement with CSS
• CSS Newbie – Using the CSS @import Rule