Thursday, September 09, 2004

CSS – Page layout and naming conventions

Introduction

Despite being an ardent advocate of css, xhtml and all things web standardy, I realised recently that there appeared to be very little consensus on naming conventions for css styles and also the approach to developing css stylesheets outside of individual techniques. When to use id values? What to call class values? What to call them? Who cares? In my everlasting quest for greater efficiency and elegance in my mark up, I called upon the lord google and (s)he was good. I mixed it with a bit of my own experience and thoughts to fill in the gaps and came up with the following guide for laying out template pages and a basic css naming convention

Disclaimer

This is blog software. Please don't have a look at the source for this article and tell me i'm not practicing what a preach, i'm aware it is a sore irony! The example i use below is fully open for criticism as that is the outcome of much of my recent thinking on things css-like.

Why CSS?

Less coding, faster pages, more elegant code, quicker maintenance and re-purposing, more reusable, readable and accessible.

Tip #1 – Name with meaning not style

Use names which refer to the semantics of the style (purpose/context) rather than the implementation (color/size) where possible. For example, instead of #redHeader use #headerMain as its colour may change but it will always be a main header unless its structural semantics change.

Stick to a syntactical naming convention. For example, I use hungarian notation as above e.g. contentNews, contentMain etc.

I personally try to use a name so that it describes what the page element ‘is’ and also elaborates on its structural ‘context’ within the page. e.g. navMain, navSub, contentNews, headerBrandLogo etc.

I like to place the main noun that says what the element is to the left (for sorting and readability) and then use further words to define it’s semantic structure and context.

Tip #2 - Put core html styles at the top of your css file

I tend to group all the core html tag styles at the top of my css file. These make it easy to change global html tag styles in one place. I personally like to list them alphabetically, whatever makes it more readable for you. e.g. body {} table {} td {}

Tip #3 – Use IDs to define page architecture

A standard HTML content page can be broken down to a basic wireframe structure which consists of the base elements of the site navigation and page content. These elements are very important, as they represent the accepted understanding of the content and functionality of the page for designers, developers, and clients.

Using structured naming conventions allows the specializations of these roles to be clearly defined, and translates nicely into a Template architecture.Again, avoid anything in your names which corresponds to presentation, layout, colouring or any styling implementation. You are improving the richness of the semantic structure of your (x)html docuument, the styling implementation is then for the css file.

A standard wireframe page consists of a set of 'containers' or 'zones' that represent each separate content area. The following should be enough for starting your template for the vast majority of sites.

Note that ID values cannot be used more than once in a page. They are excellent ways to create the structural building blocks of a template. ID values have a higher level of what’s called ‘specificity’. This basically means that when you use ID styling they generally get applied with greater priority than class styles. http://www.w3.org/TR/REC-CSS2/selector.html gives you the low down on selectors, inheritance and specificity (I won’t go into it here!) The important focus here is to define the actual elements of the page architecture, regardless of the actual visual design or functionality.

Summary so far:

Name for content rather than presentation or positioning
Build a structural heirarchy
Allow for flexibility and extensibility within a common framework

Tip #4 – use class styles to override id selectors when necessary

I like the fact that I can simply define the structure of my master site template(s), but then I want to apply special styles to those page elements across the site. At a section level maybe, or a subsection?

[EDIT: Thanks to Luke Ballantine for the update on how to do the contextual selector properly;) ]

<div id="content">
<span class="aboutus">AboutUs Text</span>
<span class="contactUs">Contact Us Text</span>
</div>

Interestingly, you cannot do things like .contentAboutUs.contentContactUs to achieve a greater level of specificity within your stylesheets as IE does not implement this part of the css spec correctly (and we can't forget about IE can we? ;). Classes when used together simply combine their individual styles, with placement from left to right (and use of the ! important declaration) determining which style gets applied. This is fixed by the IE7 javascript hack collection along with a bunch of other selector enhancements. I don't use this collection as i can't presume my users have javascript enabled, but it's a very neat collection of fixes all the same]

Tip #5 – Use class values for repeating styles only where necessary

Class attributes can be used when there is a repeating style that you want to apply to one or more page elements. You can use the same class attribute on more than one tag and in more than one place within a single page as well as across pages so is quite flexible. For example

<h1 class="headerMain">Header</h1>

could occur multiple times within a page and across pages, and you want to give it a special style. Note that you should always think whether you can avoid using a specific class on a tag where applying an inheritance value to an id block would suffice (see the styling ids section above)

Think before you class! Before using a class selector, you should ask yourself: Is there an existing HTML element that could be used instead? Is there a class or id further up the document tree that could be used? This is called making use of 'contextual selectors' and can save a lot of typing.

#content p {margin-top: 50px;} /* all paragraphs within the content id selector get 50px top margin */

Remember, class values can be reapplied across a page, id values can only appear once.

Those 5 tips again:

Name with meaning not style
Put core html styles at the top of your css file
Use IDs to define page architecture
Use class styles to override id selectors when necessary
Use class values for repeating styles only where necessary

An example

Here's one i made earlier An example stylesheet (www.peopleandthings.co.nz/stylesheets/public.css) www.peopleandthings.co.nz/default.aspx (XHTML 1.0 Strict) The following stylesheet was used across this site, and I was able to simply the css by simply defining ID areas based on site architecture and where necessary altering html structural elements within each ID area.

/* core html styles */
body, html {width: 100%;}
body
{background-color: #CCCCCC; font-size: 100%; margin: 0px; padding: 0px; line-height: 1.4em; font-family: Georgia, Helvetica, Arial;}
h1, h2, h3, h4, h5, h6 {margin: 0px 0px 10px 0px; padding: 0px;}
h1, h2 {font-weight: normal;}
h1 {font-size: 150%;}
h2 {font-size: 130%;}
h3 {font-size: 120%;}
h4 {font-size: 100%;}
h5, h6 {font-size: 90%}
img {border: 0px;}
a {color: #0000FF;}
a:hover { color: #000000; background-color: #CCCCCC; color: #000000;}
li {margin-left: -20px; }
p {clear: both; margin: 0px 0px 15px 0px;padding: 0px;}

/* site template */
#header {}
#navMain {margin:15px 0px 20px 0px;}
#page
{width: 500px; border: solid 1px #FFFFFF; background-color: #EEEEEE; margin: 20px auto 20px auto; padding: 20px;}
#imageGallery img {display: inline; border: 0px; padding: 10px 10px 0px 0px;height: 120px;}
#footer {margin: 50px 0px 0px 0px; font-size: 85%;}
#copyright {margin: 20px 0px 0px 0px;}

CSS Naming Conventions
http://www.stuffandnonsense.co.uk/archives/whats_in_a_name.html http://www.meyerweb.com/eric/thoughts/2004/06/18/elemental-no menclature/ http://css.maxdesign.com.au/selectutorial/
http://www.w3.org/TR/REC-CSS2/selector.html