Save yourself! 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!