.NET Daily

CSS

Web Development Coding Standards Series – CSS

Posted on .

Web Development Coding Standards Series – CSS

Introduction

This post is part of a series that covers most of notable web development coding standards that you should follow.

You can download the document with all of the post from here: [download id=”8″ format=”1″]

You can see here the other posts within the series.


1. CSS General Rules

1.1 Use margin: 0px auto; as a CSS attribute for centering a div inside container;
1.2 Use .px as measurement unit in design. It’s easier to control than .em and all the developers on a project can understand it;
1.3 Use CSS reset class, example: *{margin: 0px; padding: 0px}. You can add additional attributes to this class depending on your requirements.
1.4 Use structural naming convention instead of a presentational naming convention:
Ex:
Good:

Lorem lipsum sit dolorem

Bad:

Lorem lipsum sit dolorem

2. CSS Formatting

2.1 Use Single-Line formatting. This is the most space and size efficient way to write CSS:
Ex:

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post-wrapper { bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

2.2 Use one blank line to separate logical groups of styling:
Ex:

table thead tr th.left-corner {	/* CSS style */ }
table thead tr th.right-corner { /* CSS style */ }
 
table#AddNewUser{ /* CSS style */ }
table#AddNewUser thead tr th h3{ /* CSS style */ }

2.3 Order your CSS properties. For example, if you are styling a “h1” tag, put first the font-related declarations then color-related declarations and finally the position-related declarations:
Ex:

h1 
{
   /* Font */
   font-size: 2em;
   font-weight: bold;
   /* Color */
   color: #c00;
   background: #fff;
   /* Box model */
   padding: 10px;
   margin-bottom: 1em;
}

Comments are optional, so is the formatting.

2.4 Order the CSS items in groups. This way you can easily read the contents and jump straight to a particular section. Prepending each heading with a dollar sign makes it unique, so that a search will yield only headings:
Ex:

/* $DEFAULTS
----------------------------------------------------------*/
 
body { background: #b6b7bc; font-size: .80em; font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; margin: 0px; padding: 0px; color: #696969;}
 
a:link, a:visited{ color: #034af3;}
a:hover{ color: #1d60ff; text-decoration: none;}
a:active{ color: #034af3;}
 
p{ margin-bottom: 10px; line-height: 1.6em;}

/* $HEADINGS   
----------------------------------------------------------*/
 
h1, h2, h3, h4, h5, h6{	font-size: 1.5em; color: #666666; font-variant: small-caps;	text-transform: none; font-weight: 400;	margin-bottom: 0px;}
 
h1{	font-size: 1.6em; padding-bottom: 0px; margin-bottom: 0px;}
h2{	font-size: 1.5em; font-weight: 600;}
h3{	font-size: 1.2em;}
h4{	font-size: 1.1em;}
h5, h6{	font-size: 1em;}
Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.

There are no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

View Comments (0) ...
Navigation