Style sheet best practice 1. Structure of Style Sheets by prancer88

VIEWS: 19 PAGES: 6

									Style sheet best practice
Last reviewed the 26th of November 2008. Jeppe Basse.

The following document describes the strategy we decided for implementing style sheet. Style sheets
should off course validate with 0 errors or warnings on http://jigsaw.w3.org/css-validator/, but it’s also
required that we have a logical, easy to read - and easy maintainable style sheet.

All style sheets should have comments that explain the purpose of different code elements so it’s
understandable for developers outside our organization. The general descriptions of structure of style
sheets can be reused.

We always do DIV based layouts and test in all modern browsers:
IE6+, Firefox 2+, Safari, Google Crome.

All style sheet definitions should be written in external CSS file, in lowercase and indent on text should be
Visual Studio standard (use Edit-> Format Document). The below texts describes implementation in
details.

Content:

Style sheet best practice ...................................................................................................................................1
   Content: .......................................................................................................................................................1
1. Structure of Style Sheets..............................................................................................................................1
   “Reset.css” ...................................................................................................................................................2
   “Global.css” .................................................................................................................................................3
   “Master.css” .................................................................................................................................................4
   Individual page style -or function area Style sheet ......................................................................................4
   “Font.css” ....................................................................................................................................................4
   Print .............................................................................................................................................................5
2. Implementation form ...................................................................................................................................5
   Good naming and Contextual style..............................................................................................................5
   Avoid unnecessary nesting ..........................................................................................................................5
   Avoid redundant definitions ........................................................................................................................5
   Avoid hacks .................................................................................................................................................5
   Be aware of dynamic use of XHTML .........................................................................................................5
   Read resources on WWW............................................................................................................................6


1. Structure of Style Sheets
We have a basic style sheet called “Reset.css”. The goal of a reset style sheet is to reduce browser
inconsistencies in things like default line heights, margins and font sizes of headings, and so on.




            Jeppe Basse, Store Kongensgade 10, 2 sal. DK-1264 KBH K | mail@jeppebasse.dk | www.jeppebasse.dk                                                       1
On top of reset, we organize style sheet in 3 main types of style sheets that corresponds to the way files
are organized in the .NET framework. That is “Global.css”(All solutions), “Master.css” (MasterPage), and
functional area or page specific style sheets (UserControl or ASPX page) like “Search.css”.

Also we have an additional style sheet for typography, mainly because this is required for CM-systems like
Umbraco for using in WYSIWYG editor. Therefore fonts are defined separately. All printing definitions are
embedded directly in the appropriate style sheets.

The structure is explained below with examples.

“Reset.css”
The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights,
margins and font sizes of headings, and so on. And example of such style sheet can be seen below:
(From http://meyerweb.com/eric/tools/css/reset/ )

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
           margin: 0;
           padding: 0;
           border: 0;
           outline: 0;
           font-size: 100%;
           vertical-align: baseline;
           background: transparent;
}
body {
           line-height: 1;
}
ol, ul {
           list-style: none;
}
blockquote, q {
           quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
           content: '';
           content: none;
}

/* remember to define focus styles! */
:focus {
           outline: 0;
}




        Jeppe Basse, Store Kongensgade 10, 2 sal. DK-1264 KBH K | mail@jeppebasse.dk | www.jeppebasse.dk    2
/* remember to highlight inserts somehow! */
ins {
           text-decoration: none;
}
del {
           text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
           border-collapse: collapse;
           border-spacing: 0;
}



“Global.css”
This style sheet has all that is general definitions for all solutions. The rules are: Put all base definitions in
here - if the definition should be in all future solutions. An example of such a style is:

td {
/*Always top align cell content*/
vertical-align: top
}
textarea
{
/*Make font same as other input boxes*/
font-family: Arial;
}

It’s a good idea to set base definitions of tags like ADDRESS, UL, LI and so on here also. Example
redefine <ADDRESS> tag, so it has no build in design attributes (like italic text), but can be used for
address information - not because of how it looks - but because of its syntactic meaning! This could be
done by adding tags like this to the “Global.css” like this:

address
{
font-style:normal;
}

The purpose of “Global.css” is that we want a global re-usable style sheet with definitions we always
redefine from standard. Like address should not be italic, p has padding etc. This way, when we
implement a website, we can use elements like <Blockcode>, <Address> how they are intended and not
worrying about that its original html definition look. A good explanation of all basic elements in HTML can
be found here: http://www.w3schools.com/TAGS (also built in definitions can be seen in Firebug).

Use common naming convention like “ContentArea”, “LeftMenu”, “TopMenu”, “Footer” so it is easier to set
some basic settings for all future projects, example we want “images to float in ContentArea”, use “<li>,
<ul> as menu items in LeftMenu” and so on. This way we reusing much more basic settings - and save a
lot of time.

- In short: ”Global.css” should be reused on all projects without changes. Else the CSS definition does not
belong in this style sheet (see next style definitions).




        Jeppe Basse, Store Kongensgade 10, 2 sal. DK-1264 KBH K | mail@jeppebasse.dk | www.jeppebasse.dk        3
“Master.css”
We create one or several masters for the actual project. The master style sheet should have all definitions
that apply to the whole site or section. This means structure, background image, etc. The Master style
sheet corresponds to the Master page in .NET terminology.

Individual page style -or function area Style sheet
We use isolated style sheet for all definitions that is not global. This way it’s much easier to find out what
definition causes what result - and the page load time is also reduced a bit.

Examples: “Article.css”, “Search.css”, “FrontPage.css”, “TagCloud.css” etc.

By isolated CSS, we mean that this small style sheet should have definition that is special for the area.
Example: “Search result” – it usually has the same font, same link colour etc. etc. so “Search.css” would
only contain the “special DIV structure”, “highlight of words” and other definitions that is ONLY used for
this element. Else the definition would be in page or master style sheet. We will only include the style
sheet when situation needs it. This way we can add the style sheet dynamic to page header area when we
need it.

Something like adding to ”search.ascx”:

HtmlGenericControl link = new HtmlGenericControl("LINK");
link.Attributes.Add("rel","stylesheet");
link.Attributes.Add("type","text/css");
link.Attributes.Add("href","search.css");
Controls.Add(link);

Or, if style sheet are defined at page level (ASPX), use .NET themes to add style sheet.


“Font.css”
Should have everything that relates to typography, and this should be defined no where else. The style
sheet will have base definition like:

body, td, div
{
    font-family: arial, verdana;
    font-size: 11px;
}

And then specific definitions on necessary elements. Like:

h1
{
     color:#ff0000;
     font-size: 18px;
}

- We don’t need to set font to Arial, because it’s set as general setting.




        Jeppe Basse, Store Kongensgade 10, 2 sal. DK-1264 KBH K | mail@jeppebasse.dk | www.jeppebasse.dk     4
We isolate all font definitions in font style sheet, so we can use this in WYSIWYG editor in Umbraco,
Sitecore etc. Font definitions should off course be web safe and have fallback definitions
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html


Print
We don’t use individual print style sheets. Instead we embed the individual rules that should apply when
printing directly with the individual style sheet, like:

@media print {
leftMenu
{
    display:none;
}
}

2. Implementation form
Some basic principles for implementing style sheet:

Good naming and Contextual style
Naming should be clear English. Avoid definitions like “MainContentP”, “LeftTD” and so on. Contextual
style with good naming is much better. Like:

.mainContentArea h1
{
    font-style: italic;
}
.mainContentArea p
{
    color: #FF0000;
}

Avoid unnecessary nesting
Avoid too many DIV´s and empty elements. It’s much better to redefine elements base behaviour instead
of making a lot of ekstra code. Be aware of possibility to set float, change to block elements instead of just
adding more DIV´s around elements.

Avoid redundant definitions
Avoid repeating code, like multiple definitions of font-type, padding or similar.

Avoid hacks
Avoid browser specific hacks and so on. Newer use “!important”, newer use JavaScript to set height of
elements etc.

Be aware of dynamic use of XHTML
It’s very important to think about how the HTML is going to be used. Like “news area” will grow in height,
its not always we have a <p> when working with WYSIWYG, the webmaster can change the length of




        Jeppe Basse, Store Kongensgade 10, 2 sal. DK-1264 KBH K | mail@jeppebasse.dk | www.jeppebasse.dk    5
words. So be aware not to set strict limitations to areas that need flexibility. It’s important to think about
these issues when implementing.

Read resources on WWW
A bit of goggling can lead to a lot of valuable information. An example of interesting online reading can be
found here:
    • http://www.webcredible.co.uk/user-friendly-resources/css/planning-stylesheet.shtml
    • http://www.evotech.net/blog/2007/04/css-best-practices/




        Jeppe Basse, Store Kongensgade 10, 2 sal. DK-1264 KBH K | mail@jeppebasse.dk | www.jeppebasse.dk         6

								
To top