71–80 of 122 posts
1. reset.css 2. global.css - reusable classes and styles for common selectors (html, body, a, etc) 3. css named per page (or type of a page) - ex. home.css / about.css / results.css / static.css
* I usually add a class / id to the body and use that as my first selector on the page-level css. This allows me to combine all + minify for production
Personaly i keep everything to do with each area to gether ie. Header, footer, I wouldn't seperate out the &
tags & place all the
's together.
if i'm working on a large site i tend to seperate out the css by section home, Base template (about for example), contact, blog, news, shop...
Don't overcomplicate things: - Have only one CSS-file, unless your project is huge . - Never use IDs - Avoid reset CSS (espescially if you can ignore IE6/7 - If you think you need variables (like in SASS), you are probably thinking about it the wrong way - Give classes functional names, not presentational - Linebreaks after declaration. (Makes your CSS-file easier to navigate) - Remember that you can use you media qu…
Slightly related, but mainly a formatting issue, I format my css files as such: .foo { x: y; a: b } .bar { m: n } .baz { background: blah blah url(xyz.png) top left; x: y; i: j; } instead of the more commonly seen: .foo { x: y; a: b; } .bar { m: n } .baz { background: blah blah url(xyz.png) top left; x: y; i: j; } My format takes up less vertical space in the editor. Sometimes, I can get my entire CSS file into a sin…
Edit: Rephrased to try and better express the idea.
Within the selectordefinitions I write general definitions like width, heigt, display-type and position (top/left.. margin, padding) first. Then contentspecific definitions like font definitions. At the end I write border and background definitions.
That way it's an ease to see if an element hast a specific definitions, because I know if I'm looking for the width and the first definition is not the with then there is no width set for this element.
I think when you find yourself writing nested selectors that are heavily dependent on the HTML structure, it's an indication that your code could be less fragile if you just used the HTML style attribute instead.
Just run it through ProCSSor ( http://procssor.com or http://css.tl ). Lots of options.
Earlier quoted context omitted.
The problem with absolutely unique elements is that, in a complex enough website (that evolves over time), they often end up not being unique after all. I agree about IDs for JavaScript though.
"I agree about IDs for JavaScript though." Would you mind elaborating on the JavaScript point? Is it for convenience with document.getElementById or something? Using jQuery, I tend to prefer class selectors the same as in my CSS.
Within the selectordefinitions I write general definitions like width, heigt, displaytype and position (top/left.. margin, padding) first. Then contentspecific definitions like fontdefinitions. At the end I write border and background definitions.
That way it's an ease to see if an element hast a specific definitions, because I know if I'm looking for the width and the first definition is not the with then there is no width set for this element.