5 Step Style Sheet Weight Loss Program
Tags: BeginnerDoes 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
Không có nhận xét nào:
Đăng nhận xét