CSS Convention

The idea situation will be a generic CSS theme independent from web site content & html. This theme can be attached to any websites and change all the looks of feels of that website. This is nearly impossible because there will be so many different styles of websites using all kinds of div and effects.

However, it does possible to write good CSS, that can be attached to many websites with minimize changes to fit into the new website structure. Theme written in this way should following some conventions to make it easier for other user to understand and maintain.

The purpose of this article is to start a purpose for CSS convention.

Naming convention

lower-case:
to prevent case sensitive problem in some situations, all naming of ID and class should use lower case

middleline:
“-“ should be used to separate two different words in one class name. For example, lower-case, right-sidebar.

abbreviation:
should try to avoid abbreviation except some common understandable ones. Below is the common accepted examples of abbreviation
nav: navigation
bg: background

image names
image should be named according to the layout position or meaning elements the image is located. This should be much easier for people to find the right image. If it is a background image, the name should ends with “-bg”+ file extension.
For example:
“right-sidebar-bg.gif”.
“header-bg.gif”

CSS file names
Instead of one big css file, we can divide the CSS into different smaller files. Typical names of CSS are:

reset.css: reset of browser default CSS. All default values of fonts, box model settings, image border or other property setting can go into this sheet.
position.css: only about position and background color or image of the layout position block including the body. Typical layout positions are header, footer, left-sidebar, main-content and right-sidebar. This is about the choice of Faux column or liquid column layout. Please see below for more detail.
skin.css: control all looks & feels of all the elements in the page, like search, login, comment. When you want to change the skin of one website, this is the file to change.
print.css: clean css for page print preview.
ie.css: contains the IE hack rules.
form.css: defines default rules for form elements.
grid.css: contains class to easily control page grid layout.

server side technique can be used to combine and compress more css files into one bigger file.
ie.css should be separated, and add manually to the page using tag like
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
container instead of wrapper
“container” should be used instead of “wrapper”.  There are same amount of people using “wrapper” as people using “container”. There is no reason for one is better than the other. We recommend “container” instead of “wrapper” only to make name consistence.

Page layout

Layout position controls the main block of div in the page and their positions. It should uses DIV + ID to identify position blocks. The ID should be named according to the position, not according to the usage of that block. The actually position of DIV should be controlled by CSS. ID name should be chosen from below list

body-container: The whole body container, usually used to define the canvas size of one page.
header: the header section of the page.
main-container: the container of the main content part, includes sidebar or columne. This is mainly for the reason of "Faux Columns"
logo : the div container for logo image
left-sidebar: side bar on the left.
right-sidebar: side bar on the right
main-content:  the main content body, in the middle of left-sidebar & right-sidebar.
footer:  footer section of the page.

For layout with more columns, the following names can be used as well.

left-column: The column at the left side.
left-middle-column : the column between middle and left column.
middle-column: The column in the middle.
right-middle-column:
right-column

For 3 columns layout, names should be left-column, middle-column and right-column. For 4 columns layout, names should be left-column, left-middle-column, right-middle-column and right column.

Below is the html frame we used at sitekin.com.

Content Block

Content block contains the actually content of a website; it should uses “div” + “class”, and name according to the usage of that block. Layout should be named according to position because layout elements will always be unique while same content block can appears more than once in one page. For example, Google always has one search box on top of pages and the other search box at the bottom of pages.

If it is sure that one content block is unique in one page, use of “div” + “ID” will be fine as well.

One page can contains many unique content blocks with their own meaningful names. For generic content blocks, should try to pick up names from below:

login: The login block, normally contains user & password textbox.
registration
menu:  navigation menu.
sub-menu:
list: the list of content, this should be the outside container of one list of content. It should be a generic list, can be used for different contents, for example, news, announcement and search result.
list-container: an alternative to “list”
item: one content item.
item-content: body content of that content item. Alternatively, can use selector to select “content” class under “item” class, same for “item-title”, “item-subtitle” and “item-link”.
item-title: title of one item.
item-subtitle: subtitle of one content item.
item-link: link to the item detail page.
container: Container is only used to contain other content block, for layout or other reasons. It should be named as [layout or element name] + “-“ + “container”.
breadcrumb: the breadcrumb navigation
search
form
contact: the contact us block.
block: a block of content, normally in the left or right sidebar. For example, a block for a square banner, a block for latest 4 news.

Content Element

Content elements are the items inside one content block. For example a link, news title, news summary, etc. It is recommended to first define some generic styles for common items. For example:

--------------------------------------------------
a { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:12px; }
--------------------------------------------------

You can also define some generic styles for common content elements. For example:
--------------------------------------------------
. title {}
.link {}
.subtitle {}
.summary {}
.content {}
---------------------------------------------------

The common naming list of content elements as below:
title
subtitle
info
content
link
button
input
summary
author
date
remark
notice
warning
error
normal

CSS writing guide

Css files should be located in a folder under the webroot, for example \theme\reset.css, files should NOT be placed directly under the root. Image file should be placed under an “images” folder below the Css folder, this is to make the theme more portable.

The css file should be written in a way easy for user to understand and maintain. During the development, we can use different files to separate style sheets, for example, reset.css, layout.css, print.css. On deployment, we can choose to combine and compress those css files into one http request. Inside every style sheets, comments can be used to separate different sections.Section can have sub sections.

Comment should start with “/*”, then one space, and then the name, can follow a description start with “:”.  the second line shoule multiple of "-", end with close tag"*/"

Example:

/*layout : layout of the page 
--------------------------------------------*/

If one section contains too much content, use of sub section is advised. some section should have indent. For example:

/* forum : forum block
 ---------------------------------------*/

        /*input
       --------------------------*/