.NET Daily

ASP.net

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.

View Comments (0) ...
Navigation

Privacy Preference Center