5 Step Style Sheet Weight Loss Program

5 Step Style Sheet Weight Loss Program

5 Step Style Sheet Weight Loss Program

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;
}

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>