Save yourself! Optimize your CSS!!

 

Optimize your CSS

Optimize your CSS

Vediamo come poter ottimizzare il nostro codice CSS per migliorare la leggibilità del codice, per diminuire i tempi di sviluppo,  per gestire meglio stili e layout diversi contemporaneamente e per ridurre le dimensioni dei file CSS.

Salviamo noi stessi da stress inutili causati dal dover ricontrollare e modificare 1000 volte il codice e i nostri colleghi che magari dovranno lavorare con noi o dopo di noi!

 

 

 

Shorthand Declaration

 

Not optimized version

4 declarations

.DivClass { 

     margin-top: 30px;  
     margin-right: 50px;  
     margin-bottom:  62px;  
     margin-left: 40px;

 } 

 

Optimized version

1 declaration

p { margin: 30px 50px 62px 40px; } 

 

More short declaration!

4 values (top, right, bottom, left)

.divClass{

     margin: 30px 50px 62px 40px;

}

 

3 values (top, left and right, bottom)

 

.divClass{

     margin: 30px 50px 40px;

}

 

 

2 values (top and bottom, left and right)

 

.divClass{

     margin: 30px 40px;

}

 

 

1 values (same value for all sides)

 

.divClass{

     margin: 30px;

}

 

 

Optimized Font declaration

(font style, font variant, font weight, font size/line-height, font-family)

font: italic small-caps 900 1.0em serif;

All the font properties in one declaration

 

Differents CSS version for differents media

 

CSS for Computer Screens


<link rel="stylesheet" type="text/css"
href="screen-style.css" media="screen" />
CSS for Printers
<link rel="stylesheet" type="text/css"
href="print-style.css" media="print" />
CSS for all media type
<link rel="stylesheet" type="text/css"
href="style.css" media="all" />
CSS Media type list and information

 

CSS for IE

Conditional comments

Recommended by the Microsoft IE development team.
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" media="screen">  
<![endif]-->
(use 7, not 6 for IE7) 

 

Reset your CSS

 

Start your CSS with:

 

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td{margin:0; padding:0} table{border-collapse:collapse; border-spacing:0} fieldset, img{border:0} address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal} ol, ul, li{list-style:none} caption, th{text-align:left} h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal} q:before, q:after{content:''} strong{font-weight:bold} em{font-style:italic} a img{border:none} h1, h2, h3, h5, h5, h6{font-weight:bold}

 

This code allow you to reset all browser default style! No more surprise while testing your code in differents browser!

Personalize it as you prefer.


Indent your code

 

Not indented

body{font-size:0.8em; font-family:Arial,Helvetica,sans-serif; color:#FFF; margin:0 auto -80px; text-align:center;}

 

Indented code (with whitespace)

body{

    font-size: 0.8em;

    font-family: sans-serif;

    color: #FFFFFF;

    margin: 0px auto -80px;

    text-align: center;

}

 

Separe layout styles from the rest of the styles

For differents typography and colors make attention to separete this style from layout style (box, div, etc...)

 

The names

Please, not boxSX but Sidebar. Not topDiv, but Header.

Name of the div/class are important!!

 

CSS comments

Help yourself and your co-workers, comment your code please!

 

 

Buon weekend a tutti!