TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

How to Manage CSS Explosion

63 pointsby niyazpkover 14 years ago

8 comments

mikeklaasover 14 years ago
You can't.<p>You can try to reduce the horribleness of a CSS file, but the language simply doesn't provide the tools needed to do the one thing all programmers need to manage complexity: abstract away the common part of two specific processes into a reusable component.<p>I'll never forgive the designers of CSS for not at least providing immutable constants, if not variables.
评论 #2147057 未加载
评论 #2147810 未加载
评论 #2149586 未加载
tintinover 14 years ago
<i>"I am using a large number of div tags within the website (previously it was completely tables based)."</i> That's one part of the problem. Why not use tables if you are using .title, .body and .footer for DIVs when tables have this as default? I see a lot of people using DIVs on places they shouldn't. They use things like &#60;div class="title" ... Why not use H1 - H6 instead?<p>HTML tags provide structure. Structure means less complexity. Using only DIVs will get you into CSS trouble.<p>Edit: A good tip: your website will look more consistent and clean when you try to build your pages by only declaring HTML tags in your CSS at first. Only when there is no other solution declare classes and IDs. And even then remember you can use multiple classes in your class attribute. Things like: class="width50perc floatLeft textAlignRight textColor1" are very handy.
评论 #2148406 未加载
kevinburkeover 14 years ago
Surprised no one mentioned Sass or LessCSS.
评论 #2146788 未加载
评论 #2147581 未加载
评论 #2146893 未加载
评论 #2146695 未加载
bill-nordwallover 14 years ago
There are better ways to manage CSS bloat.<p>See Nicole Sullivan's Object-Oriented CSS approach: <a href="https://github.com/stubbornella/oocss/wiki" rel="nofollow">https://github.com/stubbornella/oocss/wiki</a>
评论 #2147203 未加载
NHQover 14 years ago
I love CSS. It's so easy to get the results you want. Redundancy, messiness, and other complaints are a small price to pay for that.
Swizecover 14 years ago
I wish my designer would read this ... but he's just a designer, what does he care about the quality of his CSS.<p>Any good stackoverflow answers for that? Making people who think "code" is a side-product take pride in that part of their work too?
beza1e1over 14 years ago
My personal guidelines:<p>* Partition into sections for fonts, colors+images, positions+spacing, text, and specials.<p>* Refactor for minimal property duplication, instead of selectors. For example text-weight:bold; will be mentioned only once, but the "#content a" selector multiple times.<p>* Use a CSS reset.<p>* Make an extra file per browser+version for hacks. Do not use hacks, which make sure they get triggered in IE7, but not 6 or 8, for example, but use ie6.css, ie7.css, and ie8.css. Duplicate code for this if necessary.<p>Example: <a href="http://beza1e1.tuxen.de/style.css" rel="nofollow">http://beza1e1.tuxen.de/style.css</a>
jgalvezover 14 years ago
My approach: <a href="http://jonasgalvez.com.br/Software/HCSS.html" rel="nofollow">http://jonasgalvez.com.br/Software/HCSS.html</a>