betabug... Sascha Welter

home english | home deutsch | Site Map | Sascha | Kontakt | Pro | Weblog | Wiki

30 April 2008

Notes About CSS Editing

It helps if you didn't make a mess out of it from the start

I'm doing a lot of CSS work lately. Even though I believe CSS is vastly superior to table based layout and font tags and center tags (and all that garbage people used to use), I'm hating it. The problem with CSS is that it's much too clever and meant to be much too clever. There is just no way a machine seems to be able to output meaningful CSS... so in the end it's all handcrafted. And you have to think about it. Tired of it all (I've been that for a while now), yesterday I looked at some of the options for making my life easier and thought about some of the things I could have done better...

Bad news first: There really is no CSS editor. No matter what people tell you. None of the products does much more than you can do with a simple text editor. Sure, you won't have to look up how to make something bold (font-weight: bold;), but you pay for that with endless forms of options for every aspect of styling. Clicking it all together doesn't really help.

What we would really need is a tool to help with the planning stage of CSS design: Something to help you rough out the code structure, to keep track of what elements exist and all that.

At the current project, I've made a mess of it all. I'm paying for it now, with every edit going through a minefield, likely changing something on another page I've never suspected. Also searching like crazy for every edit where I do have to make changes and which parts of the CSS file affect my current element. I've looked at some of the tools. I liked cssedit, which tells me almost everything I want to know about the current element.

But even better was the FireFox extension Firebug: This one lets me "inspect" an element, then shows me all of the CSS that affects this element. Which rules are applied directly, which are inherited, which are inherited and overridden. This helps a lot.

Apart from that it comes down too this CSS design strategy:

Posted by betabug at 11:09 | Comments (3) | Trackbacks (0)
ch athens
Life in Athens (Greece) for a foreigner from the other side of the mountains. And with an interest in digital life and the feeling of change in a big city. Multilingual English - German - Greek.
Main blog page
Recent Entries
Best of
Some of the most sought after posts, judging from access logs and search engine queries.

Apple & Macintosh:
Security & Privacy:
Misc technical:
Athens for tourists and visitors:
Life in general:
<< Athens to Patras by Train | Main | Like Riding a Build Cycle... You Never Forget >>
Re: Notes About CSS Editing

I agree, and specially i agree with:

"work with standards compliant browsers first, put IE "fixes" into a separate CSS file (included with conditional IE comments) later" -> The best option here (IMHO) is to create a base stylesheet, the create stylesheet_ie6.css, stylesheet_ie7.css and put in there specific things for them, that will overwrite the ones in the base css. It is pretty easy to load them later if USER_AGENT=ie*

"avoid all the "IE hacks", hacks in general, floats, clearfixes, etc. like the plague - you will cry yourself to sleep for nights on end for every time you use these, so better keep it as low as possible" -> everybody loves the " *html blabla " thing, but that's a mess, and could result in unexpected behaviour on upgrades...

"while we're at it: everybody is shouting at tables, but keep in mind that if your data is really tabular, then use a table... that's what they were meant for!" -> I've discussed so many times with so many people about that... why tables are wrong? well, do not use them for everything, but sometimes it is the better/easiest way to go!.

Finally, about which editor to use, I think it is a matter of being organized, that is, with a simple text editor you have everything you need, just write your code cleanly and organized, and you do not need anything more (IMHO).

Posted by: Wu at May 01,2008 13:23
Re: Notes About CSS Editing

Wu, for everybody who comes to you with stuff like "*html blabla" hax, tell them to wake up: There is an official way to make stylesheets only for IE (or IE6 or IE7): Conditional comments in the html headers. See for example what I wrote back in November 2006 about IE7.

Posted by: betabug at May 01,2008 17:21
Re: Notes About CSS Editing

I cannot hate more that job. Perhaps because I do it once in a while and I have to refresh all the knowledge, and crash my head against the wall again.

About the editors: I like something with auto indent, line count, regular expresion search, syntax color, and autocomplete. But.... wait... vim does that for css! :D

Well, in a while I'll be whineing about css, so just wait for me :D

Posted by: graffic at May 06,2008 19:24
You can trackback to:
There are no trackbacks.