David Garzón

¿Como podemos organizar una css? Aquí tenemos una pequeña solución.

1) Indent descendant and related rules:

This allows you to easily recognize page structure within your CSS and how sections related to each other

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; }