CSS Best Practice / News Question

Question

Well, a very quick question is the best way out of them to apply CSS styles:

1 - Use many different classes that apply different parts of the style, i.e. class = "font-1 red-bkg border-1" etc. etc.

or

2 - Separate separate parts of the site separately

Answer 1

What you have to do for font , for example, is an apple on the body , the same for background color, font color, etc.

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

Then for individual functions (e.g. margins, indents, borders, etc.) they must be defined in the class.

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

This is better for convenience and makes your HTML less messy.

I believe that in order to justify common classes you should have more than one property, otherwise you will not get anything from using CSS modularity.

those. such things are not good ideas:

 .bold { font-weight: bold; } 

Answer 2

Set up individual parts of the site separately. Another solution would entice the idea of ​​separating content from style.

Answer 3

You seem to enjoy reading this, of course I did:

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

Answer 4

You have to name the classes logically, because when you change the layout, and currently you have a style, for example

 .bold .5px-brd .red.bg 

then changing this to a different color and style will enable grep'ing through the entire application code to fix css styles.

As you can see how

 .bold .5px-brd .red.bg 

this is good, and does not come with a CSS philosophy.

Classes with the type name .bold should be used as a helper style. Never like a basic building block.

Answer 5

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