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]
#main {
width: 530px;
padding: 10px;
float: left;
}
#main #nav{
background: #fff;
width:100%
}
#main #left-col {
background: #efefef;
margin: 8px 0;
}
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.
/* Header Styles Go Here **************/
...CSS Code Goes Here…
/* End Header Styles *************/
Header
Structure
Navigation
Forms
Links
Headers
Content
Lists
Common Classes
And a sample separator that is most easily noticeable
/* -----------------------------------*/
/* >>>>>>>>>>>>> Menu<<<<<<<<<<<<<<<<-*/
/* -----------------------------------*/
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:
h2{ color: #dfdfdf;
font-size: 80%;
margin: 5px;
padding: 10px;
}
Do this:
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.
#main { @import "/css/layout.css";
@import "/css/typography.css";
@import "/css/design.css";
@import "/css/design-home.css";
@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
*{ margin: 0; padding: 0; }
Do This
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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
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.
/* 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:
#header #header_menu #header_logo
8)Alphabetical Properties
It makes specific properties much easier to find.
body {
background:#fdfdfd;
color:#333; font-size:1em;
line-height:1.4;
margin:0;
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]
.width100 { width: 100%; }
.width75 { width: 75%; }
.floatLeft { float: left; }
.alignLeft { text-align: left; }
.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.
Number 9 is blasphemous. IDs and class names define element roles, not presentation.
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.
Great article on CSS Coding structure, good stuff to share :)
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) Keep style type on single line??????
for me it is better to keep in separate lines.
Keeping style in one line makes me confused
Mario, Karim
Optimizing for a server is very different, but when developing locally, this really speeds up my development.
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.
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.
Thomas Neumann
But maybe if you use this way your files might not need vertical scrollbars. :)
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.