5 ms·

My #1 tip is to use a CSS grid system such as 960.gs - http://960.gs/ http://960.gs/ or Blueprint CSS - http://www.blueprintcss.org/ http://www.blueprintcss.org

My #1 tip is to use a CSS grid system such as 960.gs - http://960.gs/ http://960.gs/ or Blueprint CSS - http://www.blueprintcss.org/ http://www.blueprintcss.org/ You'll solve so many headaches with layout, at the cost of having ugly CSS class names.

michaelbuckbee 16y ago
Agreed, I've found a sweep spot using Blueprint along with the jQuery UI elements to rapidly create a decent looking site.
wdewind 16y ago
This goes pretty much 100% against my tip. Absolutely DO use a grid system for your design, please DONT'T use a CSS grid framework. Here's why: Let's say you have a class "column-760" for a 760px wide column. Now let's say you want to re-design the page. Not only do you have to write new styles, you have to go in and remove all the places you've written "column-760" in the actual markup. This entirely defeats the purpose of external CSS, and incorrectly couples style with content. I can't tell you how frustrating it is to work on a page that says something like: <div class="column column-760 relative green-background"></div> DO use content descriptive class names, DON'T use physically descriptive class names.
- jefflinwood 16y ago
  Why not use semantic class names with the grid system? That's what a tool like Compass (http://compass-style.org/ http://compass-style.org/) will do for you. Also, if you're using a template or theme, many of the changes you'd need to make if you were changing the layout would only be made in one place.
  - wdewind 16y ago
    To be honest I hear you, if you use semantic class names tied to a grid, and keep the class layering to a minimum it's totally fine. But I've just never found a use for CSS frameworks, SASS etc. (and I work on a relatively large public site). CSS has just never been the bottleneck for me, and the few times I've wanted to use variables and other complications have usually been for "clever" hacks, nothing production quality IMO. As for your second point, it really depends on the coupling. If you are using a grid system, like I was talking about, it's pretty rare that you would ever want to restyle EVERY single 760px wide div (which just leads to more class layering and more of a headache).
- komlenic 16y ago
  I agree wholeheartedly, however some of the re-use headaches of using a framework with non-semantic class names can be mitigated if you're using some sort of include/templating layer (see my other post in this thread.) Done well, on a site with a fairly standardized design from page to page, you'd hopefully only have to edit the markup and/or class names in a few included files, and then the external CSS. This of course isn't going to help you if you inherit a mess, and you'd be better off just using "content descriptive class names" in the first place, but it can be an option.

michaelbuckbee 16y ago

Agreed, I've found a sweep spot using Blueprint along with the jQuery UI elements to rapidly create a decent looking site.

wdewind 16y ago

This goes pretty much 100% against my tip. Absolutely DO use a grid system for your design, please DONT'T use a CSS grid framework. Here's why: Let's say you have a class "column-760" for a 760px wide column. Now let's say you want to re-design the page. Not only do you have to write new styles, you have to go in and remove all the places you've written "column-760" in the actual markup. This entirely defeats the purpose of external CSS, and incorrectly couples style with content. I can't tell you how frustrating it is to work on a page that says something like: <div class="column column-760 relative green-background"></div> DO use content descriptive class names, DON'T use physically descriptive class names.

jefflinwood 16y ago
Why not use semantic class names with the grid system? That's what a tool like Compass (http://compass-style.org/ http://compass-style.org/) will do for you. Also, if you're using a template or theme, many of the changes you'd need to make if you were changing the layout would only be made in one place.
- wdewind 16y ago
  To be honest I hear you, if you use semantic class names tied to a grid, and keep the class layering to a minimum it's totally fine. But I've just never found a use for CSS frameworks, SASS etc. (and I work on a relatively large public site). CSS has just never been the bottleneck for me, and the few times I've wanted to use variables and other complications have usually been for "clever" hacks, nothing production quality IMO. As for your second point, it really depends on the coupling. If you are using a grid system, like I was talking about, it's pretty rare that you would ever want to restyle EVERY single 760px wide div (which just leads to more class layering and more of a headache).
komlenic 16y ago
I agree wholeheartedly, however some of the re-use headaches of using a framework with non-semantic class names can be mitigated if you're using some sort of include/templating layer (see my other post in this thread.) Done well, on a site with a fairly standardized design from page to page, you'd hopefully only have to edit the markup and/or class names in a few included files, and then the external CSS. This of course isn't going to help you if you inherit a mess, and you'd be better off just using "content descriptive class names" in the first place, but it can be an option.