91–100 of 122 posts
I have four core files: reset.css - I use eric meyer's elements.css - Global defaults for things like body, h1, h2, h3, p, a, input, strong. All or almost all selectors in here are just tag names. layout.css - Just sets up the global layout with containers: e.g. header, footer, left column, right column. blocks.css - Reusable chunks. In addition to that, I use a separate file for each "page type". For example, 'artic…
Earlier quoted context omitted.
Another problem with IDs is that they make the "point system" in selectors much more complicated than if you only use classes and elements.
What about an ID for main page elements and things that never will change like #header or #footer or #sidebar?
I can't recommend Compass/Sass highly enough. A CSS pre-processor will completely free you to organize your CSS however you want, and more importantly, it lets you build up a library of common components (forms, buttons, etc.) that you can easily reuse and adapt for new projects. Generally, these library files will simply contain mixins (reusable chunks of code), so they don't output anything directly into your CSS,…
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.
Exactly, as far as CSS is concerned an id is effectively equivalent to a class name except when it breaks things. Ids should be used only for scripts, and most of the time should be auto generated anyway.
Natalie Downe, my co-founder, has a very neat technique for organising CSS which she calls a CSS System. She described it in this talk: http://lanyrd.com/2008/barcamp-london-5/sg/ She splits everything in to general styles (basic HTML elements), helper styles (things like forms, notifications, icons), page structure (header, footer, layout columns etc), page components (reusable composable classes for components that…
ID's are useful for unique element styling which will always be a case in a website. There's certain elements that are absolutely unique. Goes hand-in-hand with javascript to ease selector targeting. I never scope ID's either, that's the wrong way to do it. An ID is always unique so it is top-level.
I have four core files: reset.css - I use eric meyer's elements.css - Global defaults for things like body, h1, h2, h3, p, a, input, strong. All or almost all selectors in here are just tag names. layout.css - Just sets up the global layout with containers: e.g. header, footer, left column, right column. blocks.css - Reusable chunks. In addition to that, I use a separate file for each "page type". For example, 'artic…
I have four core files: reset.css - I use eric meyer's elements.css - Global defaults for things like body, h1, h2, h3, p, a, input, strong. All or almost all selectors in here are just tag names. layout.css - Just sets up the global layout with containers: e.g. header, footer, left column, right column. blocks.css - Reusable chunks. In addition to that, I use a separate file for each "page type". For example, 'artic…
That makes a lot of CSS files. Google chrome network optimization would tell you to reduce the amount of includes to speed up your site. That said that is debatable since it would be quickly cached.
Earlier quoted context omitted.
"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.
Jquery class selector is the slowest selector, avoid them as much as possible. ID selector is the fastest. So, if your application is jquery intense, better avoid css selectors.
Natalie Downe, my co-founder, has a very neat technique for organising CSS which she calls a CSS System. She described it in this talk: http://lanyrd.com/2008/barcamp-london-5/sg/ She splits everything in to general styles (basic HTML elements), helper styles (things like forms, notifications, icons), page structure (header, footer, layout columns etc), page components (reusable composable classes for components that…