CSS最佳实践/新手问题

Question

Ok, a really quick question - which is the best way out of these to apply css styles:

1 - Use lots of different classes that apply different parts of the style ie class='font-1 red-bkg border-1' etc etc.

Or

2 - Style up individual parts of the site seperately

Answer 1

What you should do for font for example is to apple it to body , same for background colour, font colour etc...

body{font: Verdana 38px; color: #000; background: #fff;}

Then for individual features (eg margins, padding, borders etc) they should be defined in a per-class way.

.classname {
    margin: 0px 5px 10px 5px;
    padding: 10px 5px 10px 6px;
 }

It is better for maintainability and makes your HTML less messy.

I believe to justify shared classes you should have more than one property in it, otherwise you are not gaining anything from using CSS's modularity.

Ie things like this are not good ideas:

.bold { font-weight: bold; }

Answer 2

Style up individual parts of the site seperately. The other solution would kind of screw the intention behind it - separating content from styling.

Answer 3

Seems like you will enjoy this read, I certainly did:

http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/

Answer 4

http://jsfiddle.net/sheriffderek/RMfEn/

html

<section class='container blocks'>
    <h2>Blocks of content</h2>
    <div class='block highlight-theme'>
        <p>None of the styling should be done in the html.</p>
    </div>

    <div class='block base-theme'>
        <p>You can use modular classes to style common pieces of the layout and then modify them with more specific classes.</p>
    </div>

    <div class='block contrast-theme'>
       <p>So the stuff in this box could be a dark-theme with .contrast-theme or something</p>
    </div>
</section>

css

.container, .block { /* structural elements */
    width: 100%;
    float; left;
    padding: .5rem;
    overflow: hidden; /* use a clear-fix instead */
}

/* mini themes /// mix and match */

.base-theme {
    background: lightgray;
    color: black;
}

.highlight-theme {
    background: yellow;
    color: red;
}

.contrast-theme {
    background: gray;
    color: white;
}

Answer 5

You should name logically classes, because when you change your layout and currently you have style like

.bold .5px-brd .red.bg

then changing this to another colour and style will include grep'ing through entire application code in order to correct css styles.

As you may notice approach like

.bold .5px-brd .red.bg

it's good, and don't go with philosophy of CSS.

Classes with name like .bold should be used as auxiliary style. Never as basic construction block.