Noupe Editorial Team November 10th, 2007

9 CSS Ethics Every Designer Should Have

No need to get any more complicated structure than you need to. Writing a CSS Stylesheet That is Easy to Maintain is really easy, just by following these 9 rules.

How deeply  you organize your CSS can greatly hinder any necessary tweaks that arise in the future. So, I proposed the question to my team to take a close look at some of the most interesting CSS coding structure and listed them below where you can probably use in every project you are developing.

1) Indent descendant and related rules:

This allows you to easily recognize page structure within your CSS and how sections related to each other. [Erratic Wisdom]

  1. #main {
  2. width: 530px;
  3. padding: 10px;
  4. float: left;
  5. }
  6. #main #nav{
  7. background: #fff;
  8. width:100%
  9. }
  10. #main #left-col {
  11. background: #efefef;
  12. margin: 8px 0;
  13. }
2)Grouping and commenting your CSS rules

Setup certain sections in your CSS files that always exists: page structure, links, header, footer, lists, etc. Those sections are always CSS commented to name each section appropriately.

  1. /* Header Styles Go Here **************/
  2. ...CSS Code Goes Here…
  3. /* End Header Styles *************/
  1. Header
  2. Structure
  3. Navigation
  4. Forms
  5. Links
  6. Headers
  7. Content
  8. Lists
  9. Common Classes

And a sample separator that is most easily noticeable

  1. /* -----------------------------------*/
  2. /* >>>>>>>>>>>>> Menu<<<<<<<<<<<<<<<<-*/
  3. /* -----------------------------------*/
3) Keep style type on single line

Combine properties onto a single line by using shorthand properties means that your CSS will be easier to understand and edit.

Instead of this:

  1. h2{ color: #dfdfdf;
  2. font-size: 80%;
  3. margin: 5px;
  4. padding: 10px;
  5. }

Do this:

  1. h5{color: #dfdfdf; font-size: 80%; margin: 5px; padding: 10px;}
4)Break your CSS into sheets

Separate your CSS stylesheets for different sections, use one stylesheet for layout, another for typography and another for colors .Mixing layout / typography properties will make you find that you are needlessly repeating yourself.

  1. #main { @import "/css/layout.css";
  2. @import "/css/typography.css";
  3. @import "/css/design.css";
  4. @import "/css/design-home.css";
  5. @import "/css/extra.css";
5)Reset your elements

Many designers clear the styling of their sheets with a global reset which has an impact on some elements like form buttons and fieldsets that are completely destroyed with the global reset.Instead, you should pick-and-choose the elements you want to reset.

So instead of doing this

  1. *{ margin: 0; padding: 0; }

Do This

  1. 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. outline: 0;
  6. font-weight: inherit;
  7. font-style: inherit;
  8. font-size: 100%;
  9. font-family: inherit;
  10. vertical-align: baseline;
  11. }
6)Place color scheme in one place for refrence.

Before you start your CSS file, comment your common colors and add it to the top of your style sheet.This will save you ton of time and will insure that your site has one color scheme.

  1. /* Colors: Dark Brown #473B38 Light Blue #A8EFEE Pink FF4095 */
7)Use a meaning naming system.

Having a naming system for classes and id's saves you a lot of time when updating your document or debugging, you can use parent/child structure. The parent would be the container. So if our DIV is named “header”, and two divs nested called “menu” and “logo”. The naming structure in your css would be:

  1. #header #header_menu #header_logo
8)Alphabetical Properties

It makes specific properties much easier to find.

  1. body {
  2. background:#fdfdfd;
  3. color:#333; font-size:1em;
  4. line-height:1.4;
  5. margin:0;
  6. padding:0; }
9)Keep a library of helpful CSS classes.

Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names, make use of them debugging your markup.[Richard K. Miller]

  1. .width100 { width: 100%; }
  2. .width75 { width: 75%; }
  3. .floatLeft { float: left; }
  4. .alignLeft { text-align: left; }
  5. .alignRight { text-align: right; }

 

Keep it Simple

No need to get any more complicated structure than you need to. Simplicity will save you time and efforts.

It would be great if you share with us your organizing tips to make this post a refrence to many of us. Don't forget to mention your site and name as it will be mentioned below your tip.

Noupe Editorial Team

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

56 comments

  1. I think Thomas means that he is getting a horizontal scrollbar as he says he is forced to scroll left and right. Using the method described in #3, you will very easily get a horizontal scrollbar since the line can get very long very quickly.

    Personally, I would rather scroll up and down instead of left and right, especially since the scrollwheel on my mouse doesn’t support horizontal scrolling and I would instead have to navigate around my document two different ways: up or down to find the style and then left or right to locate the property I wish to edit.

  2. Great article! Thank you for the unique approach. In CSS you often do not know where to begin. Clear guidelines are fine!

  3. @Noupe: Generally, I’d always prefer a vertical bar over a horizontal. , but that’s not the point i was trying to make – the point was that many tools (esp. diff and version control system, also some editors) do not work very well with long lines. Also when you have an editor that wraps lines instead of making a horizontal bar, this will make your css file look like a big pile of character junk.

  4. The idea behind #1 is relatively new to me and I must say it doesn’t sit well. This technique seems to run afoul of the separation of style from structure I hold so dear. I fully support a need for oder but I believe this is better handled through good logical grouping and sensible comments. (#2)

  5. The idea about this post is to give different ways of organizing your CSS code and files, some people use all of these directions , other prefer to just use 3 or 4 ways others just use completly different ways of organizing their CSS, it’s realy a matter of personal prefrence.
    If someone have other css organizing tips, please feel free to post it here.

  6. Short hand CSS is craking eg – padding: 0 0 0 0; But I’m not sure putting everything on one line makes it easier to read?

  7. Item #3 — one line is easy to read if your text editor or CSS editor gives you syntax coloring. But if I’m browsing style sheets on the web it is harder to glance and understand.
    Item #4 — multiple imported stylesheets are harder to maintain and I find I can lose track of cascades and inheritances.
    Items #1 and #2 — I employ. The slight overhead associated with verbose commenting is outweighed by the maintainability. And I always assume someone else will someday work with my legacy code.
    #9 — class names such as .floatLeft and .center are simple, obvious, and expedient. They are best used in tags, not divs, For example, <img class=”alignRight” and <div class=”menu” both are descriptive.
    Good article. A good dialog to start.

Leave a Reply

Your email address will not be published. Required fields are marked *