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. Hey!…I Googled for sing down the moon by scott o dell, but found your page about o.us poetry…and have to say thanks. nice read.

  2. i hate when css goes onto more than one line… it makes it really hard to read. instead i keep each class etc all on one line and use tabs to show grouped information… works well for me.

  3. 3) Keep style type on single line??????
    for me it is better to keep in separate lines.

    Keeping style in one line makes me confused

  4. Mario, Karim

    Optimizing for a server is very different, but when developing locally, this really speeds up my development.

  5. I have preferred this method for a couple of years now. I remember first seeing it on a previous incarnation of Ryan Sims justwatchthesky.com and I thought it was rather hard to read. Now, I wouldn’t do it any other way.
    I think it all comes down to what is easier for you to manage.

  6. I prefer multi-line for organizational purposes when coding by hand, but the best use of the single line selectors method is used by Panic on the Coda app.

  7. There are a few valid tips here but I have to agree with the others about 3 and 4. Everything jammed up on one line makes it far more difficult to read and find things. Having separate lines with indentation is much easier. I separate the main style sheet and the print one but never by section or type. Way to difficult to keep track of, too many calls and too many files to have open while editing.
    I found #2 and #5 to be the most valuable tips.

    Also, this whole “every designer should do this” type of article is getting really tired. Everyone is different, works on different projects and has methods that work best for their particular situation. To say that you have “THE” way to do things is arrogant and presumptuous.

Leave a Reply

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