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.