There are several advantages to sliming down your CSS. Not only does it lower bandwidth costs, it also makes editing the CSS easier because there is less code to look through. Use these simple techniques to speed up and slim down your cascading styles.
H1 { font-family: sans-serif }
is equivalent to:
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
H1, H2, H3 { font-family: sans-serif }
margin-top: 10px;
is equivalent to:
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
margin: 10px 20px 30px 40px;
"If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side."
http://www.htmlhelp.com/reference/css/box/margin.html
Therefore,
margin: 10px 0px 10px 0px;
is equivalent to:
margin: 10px 0;
Note: If entering zero as a value, you do not need a measurement unit (I.E. px, em, %, etc.).
This also works for padding and border-width and can also be applied to border-color and border-style.
border-color: #CCC #999 #999 #CCC;
or
border-style: solid double double solid;
If the value for the left side (the last value) in a margin, padding or border declaration is equivalent to the right side (the second value), you can omit it.
Therefore,
margin: 10px 3px 5px 3px;
is equivalent to:
margin: 10px 3px 5px;
From: http://css.maxdesign.com.au/selectutorial/selectors_class.htm#think
Before using a class selector, you should ask yourself:
- Is there an existing HTML element that could be used instead?
- Is there a class or id further up the document tree that could be used?
color: #ff00aa;
is equivalent to:
color: #f0a;
From: http://www.htmlhelp.com/reference/css/
background: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>- Examples:
background: white url(http://www.htmlhelp.com/foo.gif);
background: #7fffd4;
background: url(../backgrounds/pawn.png) #f0f8ff fixed;
background: #0c0 url(leaves.jpg) no-repeat bottom right;font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>- Examples:
font: italic bold 12pt/14pt Times, serif;border: <border-width> || <border-style> || <color>- Examples:
border: groove 3em;
border: solid blue;
border: thin dotted #800080;
border: thick double red;list-style: <list-style-type> || <list-style-position> || <url>- Examples:
list-style: square inside
list-style: none;
list-style: url(/LI-markers/checkmark.gif) circle;- Syntax Used in CSS Property Definitions
- <Foo>
- Value of type Foo.
- Foo
- A keyword that must appear literally (though without case sensitivity). Commas and slashes must also appear literally.
- A || B
- A or B or both must occur, in any order.
- [ Foo ]
- Brackets are used to group items together.
- Foo?
- Foo is optional.
http://alistapart.com/articles/sprites
From: http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/
When writing selectors that target an element with a certain class or id value, you can omit the element type before the . (class selector) or # (id selector).
So, instead of writing
div#content { /* declarations */ }you can write
fieldset.details { /* declarations */ }#content { /* declarations */ }
.details { /* declarations */ }
Instead of creating a whole new class definition for an element, use multiple class names.
Instead of:
.bold { font-weight: bold; }
do this:
.italic {font-style: italic; }
.boldanditalic {font-weight: bold; font-style: italic; }
<p class="bold">Bold Text</p>
<p class="italic">Italic Text</p>
<p class="boldanditalic">Bold and Italic Text</p>
<p class="bold italic">Bold and Italic Text</p>
This will use both classes (bold, italic) for it's styling. You can then get rid of the boldanditalic class from the css.
You can use as many classes as you want, but be careful because specificity can become very important very quick.
From: http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_1/
Not using descendant selectors is one of the most common examples of inefficient CSS I see from novice CSS authors. Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. Take the following code structure:
<div id="subnav">
<ul>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
<li class="subnavitemselected"><a href="#" class="subnavitemselected">Item 1</a></li>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
</ul>
</div>This could be accompanied by the following CSS:
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }You could replace all of the above with this markup:
<ul id="subnav">and this CSS:
<li><a href="#">Item 1</a></li>
<li class="sel"><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }Keep it as clean as possible and both your markup and your CSS will be more efficient and easier to read.