0p9 · HackerTrans

15 yıl öncediscuss

2) Use one line per rule so I can scan the selectors quickly, then scroll horizontally if necessary

I'm going to finally start turning off text wrap. You've opened my eyes to this. Thanks for sharing.

0p9

15 yıl öncediscuss

A good example of some super organized CSS is in the HTML5 Boilerplate by Paul Irish. Found here: https://github.com/paulirish/html5-boilerplate/blob/master/c... I sometimes use multiple instances of the same selector, especially if a project starts getting very big. I like to separate each function of the site into it's own block after the footer declarations. It lets me stay organized during development and ensures that I can keep track of what I'm working on while I'm working on it. Here's the order I'm currently using, which was inspired by the above:

    /* HTML STRUCTURE STYLES */
    body { foo: bar; }
    h1 { foo: bar; }
    a { foo: bar; }
    /* Image Replacement & Hacks */
    .ir { foo: bar; }
    /* Container Styles */
    #header { foo: bar; }
    #main { foo: bar; }
    #footer { foo: bar; }
    .column { foo: bar; }
    .sidebar { foo: bar; }
    .img-cotainer { foo: bar; }
    /* Everything inside of #header */
    .navigation { foo: bar; }
    #header li.nav { foo: bar; }
    /* Everything inside of #main */
    .content { foo: bar; }
    /* Everything inside of #footer */
    .social { foo: bar; }
    #footer li.nav { foo: bar; }
    /* Everything in specific view inside of a container from above */
    .profile { foo: bar; }
    .comments { foo: bar; }
    /* Media Queries */
    @media all and (orientation:portrait {
      * { foo: bar; }
    }
    /* Print Styles using Media Query */
    @media print {
      * { foo: bar; }
    }