Posts Tagged ‘clean code’

Keeping your CSS code clean

Friday, July 11th, 2008

I love code, that is pretty simple to see and I like it as it can give me full control over every element of the website design.  I also like clean code, without it your website may look nice but if you need to come back to the code in a year or two my bet is that it will take you more time to work out what is what in the code instead of simply getting the job done.

Clean code in whatever language you are using and for whatever purpose you need it for is essential.  This first post of a series I will do is for CSS (style sheets).

You can go even further by breaking up the CSS into separate style sheets such as Header, Footer, Content and so on, this is totally up to you, the following is my starting point I use for CSS, I hope you find it useful.

/*
Site Name:
Site URI: http://somedomain.com.au/
Description: Stylesheet for somedomain
Version: 1.0
Author: That Net Site
Author URI: http://thatnetsite/
Version Comments
v1.0
This Style sheet is ......
*/

/*-----------------------------------------------------
Reset all basic browser properties
-----------------------------------------------------*/

* {
     margin: 0;
     padding: 0;
     border: 0;
     font-family: sans-serif;
     font-size: 1em;
     font-weight: normal;
     font-style: normal;
     text-decoration: none;
}
/*-----------------------------------------------------
Basic Page Properties
-----------------------------------------------------*/
html {
     height: 100%;
     margin-bottom: 1px;
}
body {
     margin: 0;
     padding: 0;
}
p {
     margin-top: 10px;
     margin-bottom: 15px;
}
fieldset {
     border: 0;
     padding: 5px 0;
}
/*-----------------------------------------------------
Font Size Properties
-----------------------------------------------------*/
h1 {
     font-size: 200%;
}
h2 {
     font-size: 170%;
}
h3 {
     font-size: 150%;
}
h4 {
     font-size: 120%;
}
/*-----------------------------------------------------
Padding and Margins
-----------------------------------------------------*/
div {
     margin: 0;
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
/*-----------------------------------------------------
Fonts and Font Weights
-----------------------------------------------------*/
body {
     font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif;
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
/*-----------------------------------------------------
Colours
-----------------------------------------------------*/
body {
     color: #5B5648;
}
a {
     color: #960000;
}
a:hover {
     color: #000000;
}
/*-----------------------------------------------------
Backgrounds
-----------------------------------------------------*/
/*-----------------------------------------------------
Text Decorations
-----------------------------------------------------*/
a:link,
a:visited {
     text-decoration: none;
}
a:hover {
     text-decoration: none;
}
/*-----------------------------------------------------
Borders
-----------------------------------------------------*/
a img {
     border: 0;
}
div {
     border: 0;
}
/*-----------------------------------------------------
Width and Heights
-----------------------------------------------------*/
/*-----------------------------------------------------
Floats and Alignments
-----------------------------------------------------*/
.clear {
     clear: both;
}
.right {
     float: right;
}
.left {
     float: left;
}
.center {
     text-align: center;
}
/*-----------------------------------------------------
Lists
-----------------------------------------------------*/
/*-----------------------------------------------------
Displays and Positions
-----------------------------------------------------*/

Please feel free to share your thoughts and comments on how the above can be improved or even if you have some alternative methods that work well for you.

Share