The Art of Programming

Best Practices for CSS Style Sheets

23. January 2009 03:10 by Scott in   //  Tags: , , , , , ,   //   Comments (23)

A while back Microsoft released a program called "StyleCop".  StyleCop is almost like a style guide for code, kind of like what CSS is for HTML.  It gives the rules for how HTML should be setup and react.  Now I only wish someone released a stylecop for CSS.  In my many years of dealing with CSS I had to come up with a best practice or thought on how I would like all my Style Sheets to look and feel.  This would help me determine exactly where to look over each sheet.  I realized that this guide was in my head and I had never put it down on paper.  So here today, I won't put it down on paper, but will post it here for all to see.  I have seen many style sheets and this is the guide that I use when I start to build my sheets.

  • Style sheets should always have the basic essential styles which are things like underline, bold, italics, predefined h1, h2, and h3 fonts, colors, link variations, and sizes of fonts.  This allows for a similar look and feel on every page of the site.
  • Style sheets should be downloaded as fast as possible from the server and therefore must have the least possible white space while still allowing for the ability to separate styles with the human eye.  This is where a one line per style should come into practice.  For each style used, it should only take up one line of the style sheet.  No longer should you use one line per declaration of style.  This new way is an easy way of looking over each feature of the style while still allowing for fast downloads of the sheet. For Example:
body { margin:0px 0px 0px 0px; background-color: #0077b3; background-image: none; vertical-align: top; text-align: center; font-family: Arial; font-size: .8em; text-decoration: none; }

  • Style names should be camel cased starting with the name/abbreviation of the tag the style applies to and then the name of the div tag/style. 
    • For Example:  I have a Div tag with an id of userName, I should name the style divUserName. 
    • If I have no name for the tag, I should name a type of ID for the style.  For Example: divPageInformation. 
    • Unless it is a standard id like .bold, .italic, etc... I will not declare what the style does, rather I would declare where the style belongs. For example for links: aPageTitle
  • Style grouping is a way to organize your sheet for better readability and navigation of the sheet.  In the past, people used to just put styles up on the sheet and forget it.  Not thinking that they would have to later come back to the sheet for editing.
    • If the style is generic through out the entire site, I group it at the top of the sheet with all the other generic styles.
    • I then group all the styles by page and then control/object it styles.  I then alphabetize the styles in each group for a fast skimming rate.

For Example:  I have an accordion that is generic along the entire site, so I would group the entire accordion together and then alpha sort the tags.

/* Accordion */
.accordionContent { border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; }
.accordionHeader { border: 1px solid #2F4F4F; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; }
.accordionHeader a { text-decoration: none; }
.accordionHeader a:hover { text-decoration: underline; }
.accordionHeaderSelected { border: 1px solid #2F4F4F; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; }
.accordionHeaderSelected a { text-decoration: none; }
.accordionHeaderSelected a:hover { text-decoration: underline; }

For another Example:  I have a reports page.  I group the reports page together separated by one line and then group the report styles together while sorting them.
 

.liReportChkbxs { list-style: horizontal; margin: 0 5px 0 0; display: inline; }
.ulReportChkbxs { float: left; margin: 0 5px 0 0; }

.liReportsList { list-style: none; padding: 5px 0 5px 5px; }
.liReportsListHorizontal { display: inline; }
.ulReportsList { text-align: left; display: block; list-style: none; }

I hope that helps in your style sheet endeavors.  I sure do wish I didn't have to go through the learning phase of this type of style.  I would love to hear my readers thoughts on this guide and how they differ from it.

If you liked this post, please be sure to subscribe to my RSS Feed.

Comments (23) -

sk31
sk31
1/23/2009 10:38:40 AM #

I cannot fathom why you would have .liReportsListHorizontal and not li.ReportsListHorizontal.

You do realise you can use elements in selectors as well as your own classes and ids?  (Things with a dot like .italic are classes, by the way, you refer to them as IDs).

If you DO know everything with .ReportsListHorizontal IS (or should be) an li, using li in the selector would be preferred, I think.  This will actually *enforce* the style only being applied to li's, not other elements mistakenly given that class.  And apart from anything else, it is a lot faster - see ejohn.org/blog/selectors-that-people-actually-use/

If you DON'T know everything with that class will always be (or should be) an li, then why stick "li" on the front as some kind of faux-hungarian naming scheme?  This will only lead to stupid things like <span class=".liReports">.  A markup equivalent of int strFoo = 1.

Following on from this, why .ulReportsList and .liReportsList?  This implies you are bloating your markup with <li class="liReportsList">

Now we have two layers of bloat - firstly repeating li in the class when we already know it's an li element.  Secondly, the whole class on list items is pointless, you can select on them with ul.ReportsList li.  Then give particular list items a class if you want to override or extend the styles applied due to this cascade, rather than wasting time and bytes applying classes en masse to achieve something the DOM heirachy already lets you select upon.

sk31
sk31
1/23/2009 10:54:45 AM #

PS. Sorry that came across as rude/patronising.  My excuse it that it's the end of a long week and I found myself on your blog as a way of killing the last hour or so of Friday, desperate to get home and start the weekend Smile  I have a nasty of habit of getting smug/blunt with online posts in that mood.  Didn't want to be a dick, but I am genuinely puzzled as to what logic could possibly be behind your hungarian style naming convention.

Scott
Scott
1/23/2009 11:20:02 AM #

Like I said, I wish I had a guide for this.  I have just always looked at selectors like those you mentioned (ul.ReportsList li) a bland representation of (liReportList).  I can definitely find where liReportsList goes when doing a quick search for it, but I can't do quick searches on ul.ReportsList li.

I can definitely see a decrease in overall weight of the web app go down dramatically with your representation tho.  I do appreciate you pointing that out to me.  I will be trying it.

As for the apology, I love constructive Criticism, so don't feel bad.

voyance gratuite
voyance gratuite
6/3/2013 11:17:44 AM #

Horoscope roland legrand 2012 tirages tarot de marseille gratuit

Here is my page  voyance gratuite - http://www.mavoyancegratuite.biz

film porno gratuit
film porno gratuit
6/3/2013 11:24:09 AM #

Amateur allure videos streaming grosse salope

Here is my website:  film porno gratuit - http://www.hiemstradesign.com

film porno
film porno
6/3/2013 11:26:20 AM #

Pirate des caraibe porno porno fist

Feel free to surf to my website ::  film porno - http://www.computech-ca.com

films x
films x
6/3/2013 11:39:49 AM #

Sex amateur gallery ejac bucal

Check out my blog post  films x - http://www.monfilmxporno.net

voyance gratuite en ligne
voyance gratuite en ligne
6/3/2013 12:00:10 PM #

Denis lapierre cartomancie gratuite unicorne horoscope

My web-site -  voyance gratuite en ligne - http://www.munkakozvetites.com

voyance gratuite par mail
voyance gratuite par mail
6/3/2013 12:06:59 PM #

Pendentif astrologique calculer son ascendant en astrologie

Also visit my web blog ::  voyance gratuite par mail - http://www.insiders-newbern.com

减肥药排行榜
减肥药排行榜
7/13/2013 11:06:59 PM #

My coder is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the expenses. But he's tryiong none the less. I've been using WordPress on a variety of websites for about a year and am worried about switching to another platform. I have heard very good things about blogengine.net. Is there a way I can import all my wordpress content into it? Any help would be really appreciated!

my web site  减肥药排行榜 - http://www.xianzaijianfei.com/

tirage de tarot gratuit
tirage de tarot gratuit
7/15/2013 1:24:56 PM #

Pierre et signe astrologique booty  tarot gratuit des anges

My webpage ::  tirage de tarot gratuit - http://www.bartlatjes.com

tarot amour
tarot amour
7/15/2013 2:18:49 PM #

Signe astrologique amoureux sex elvyre voyance

Feel free to visit my web site ::  tarot amour - http://www.urocomp.org

voyance gratuite immediate
voyance gratuite immediate
8/5/2013 3:27:49 PM #

Tirage croix celtique gratuit tirage tarots gratuit

Also visit my webpage:  voyance gratuite immediate - http://www.voyantpartelephone.org

tarot gratuit en ligne
tarot gratuit en ligne
8/9/2013 9:55:46 AM #

Suis je enceinte voyance horoscope scorpion du jour gratuit

my homepage;  tarot gratuit en ligne - http://www.quintessafrica.com

psychic read
psychic read
8/15/2013 4:43:41 PM #

Fine way of describing, and pleasant paragraph to take data about my presentation subject matter, which i am going to convey in academy.

my web blog  psychic read - www.minigamesplus.com/.../

medium gratuit
medium gratuit
8/16/2013 7:47:24 AM #

Tirage tarot gratuit du jour signe astrologique compatible

Here is my web site ...  medium gratuit - http://www.moeys-elibrary.org

Robbie
Robbie
8/17/2013 6:42:19 AM #

All that is needed to determine the cause of anxiety and panic attacks such that it becomes a vicious cycle. This rapid increase in blood sugar is sensed by the pancreas which counters it with the creation of insulin to be created. The first step you need to take charge of it and find ways to get it fixed. This is due to often negative situations.

My webpage depression from anxiety -  Robbie - 62.140.19.114/web/openmoko/wiki/index.php/Benutzer:VernonDou  -

voyant gratuit
voyant gratuit
8/17/2013 1:48:11 PM #

Voyance serieuse par mail masculin horoscope

Here is my weblog ::  voyant gratuit - http://www.monvoyant.org

voyant gratuit
voyant gratuit
8/18/2013 12:09:43 PM #

Michele perras horoscope 2012 gratuit capricorne

my web site  voyant gratuit - http://www.agiftforthefuture.org

voyance discount
voyance discount
8/22/2013 1:18:39 PM #

Tarots divinatoires net horoscope 2011 scorpion

Check out my site ::  voyance discount - http://www.natashasfoodforpaws.com

film porno
film porno
8/23/2013 8:07:25 AM #

Consequences ablation prostate sexe tel

Stop by my webpage ...  film porno - http://www.filmpornoxgratuit.com

intermittent fasting
intermittent fasting
8/23/2013 2:04:45 PM #

Actually it's quite easy; especially for men, who don't seem to get as irritable as women when they go long periods without eating. Right from the very start, we eat different variant of foods and  drink various kinds of beverages that can contain harmful chemicals. That way, you will feel better, look better, and not have to deal wiht all of the stares and whispers.

My web blog ...  intermittent fasting - http://prosconsreviews.info/intermittent-fasting/

voyance gratuite
voyance gratuite
8/24/2013 2:05:33 AM #

Signe astrologique et ascendant mon horoscope 2012

Also visit my website ::  voyance gratuite - http://www.foryou-wasserbett.com