7t7en scraps

1. Divide and conquer your code : use master stylesheet

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

[Master Stylesheet]

Project: Smashing Magazine

Version: 1.1

Last change: 05/02/08 [fixed Float bug, vf]

Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)

Primary use: Magazine

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - */

@import “reset.css”;

@import “layout.css”;

@import “colors.css”;

@import “typography.css”;

@import “flash.css”;

/* @import “debugging.css”; */

2. Define a table of contents

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

 [Table of contents]

1. Body

2. Header / #header

2.1. Navigation / #navbar

3. Content / #content

3.1. Left column / #leftcolumn

3.2. Right column / #rightcolumn

3.3. Sidebar / #sidebar

3.3.1. RSS / #rss

3.3.2. Search / #search

3.3.3. Boxes / .box

3.3.4. Sideblog / #sideblog

3.3.5. Advertisements / .ads

4. Footer / #footer

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */

3. Define your colors and typography

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

# [Color codes]

# Dark grey (text): #333333

# Dark Blue (headings, links) #000066

# Mid Blue (header) #333399

# Light blue (top navigation) #CCCCFF

# Mid grey: #666666

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */

OR

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

[Color codes]

Background: #ffffff (white)

Content: #1e1e1e (light black)

Header h1: #9caa3b (green)

Header h2: #ee4117 (red)

Footer: #b5cede (dark black)

a (standard): #0040b6 (dark blue)

a (visited): #5999de (light blue)

a (active): #cc0000 (pink)

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - */

TYPOGRAPHY

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

[Typography]

Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;

Headers: 2.7em/1.3em Helvetica, Arial, “Lucida Sans Unicode”, Verdana, sans-serif;

Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;

Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes: decreasing heading by 0.4em with every subsequent heading level

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - */

4. Order CSS properties: alphabetically

body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}

5. Indentation and comments

#sidebar ul li a {
     display: block;
     background-color: #ccc;
          border-bottom: 1px solid #999; /* @new */
     margin: 3px 0 3px 0;
          padding: 3px; /* @new */
}

 

Courtesy: Smashing Magazine

For the full article (refer):

http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/