Holy mother of CSS
-
Reading a couple of the CSS WTFs on the sidebar from the last few days reminded me of my recent CSS WTF ... Marketing needed a mock-up of what one of our products would look like in a WSJ.com article so they gave me a link to an article and asked if i could do it. Easy enough, so I ripped a local copy of the page and after stripping out the ridiculous amount of javascript and iframes from it I went on to edit the CSS to my likings ..
There were three main CSS files, compressed of course, so I ran a quick regex to throw newlines after the braces so I could navigate it a little easier and watch as it takes a minute to parse it. I thought the time it took was rather long so I looked to see how big the files were .. the first file was over 6000 lines long, the second was 9000 and the third 2000!! The combined size on disk was over 600K, for CSS! The HTML for the page was only 80K. Maybe it's just me but it seems like they're doing it wrong ..
-
i only hope its generated ...
-
You hope that the HTML is pretty clean; and that the stylings are all held in the CSS. My guess is that there are several departments who are responsible for content; and each department gets their own CSS file. I know I've done this myself -- put a wrapper DIV around my content; and all my CSS rules begin with the identifier for that DIV. That way I know that my styles are applied only to my content and won't interfere with styling of other content I'm not responsible for. It can lead to bloated CSS and repetitive/redundant rules, sure.
CSS is a tricky beast, though, and there are not good tools (as far as I know) for reducing the redundancy. At least the browser downloads the file one time, and caches a copy, so only the initial page load takes a hit.
-
CSS factoring is one of the trickiest concepts to grasp. On the surface it might seem easy to say, "If you want all your pages on your site to look consistent, you need a concise CSS document"
While I always seek this goal, I don't always achieve it. Often times, especially when you have a particularly picky designer, there might be spacing between paragraphs that might need a little nudge in one case versus another case thanks to the way browsers tend to regard text-height in relation to serifs, descenders, ascenders, and other idiosynchrasies that might come with the font you're using. Add to this the fact that you've got cross-browser considerations, unique exceptions to a certain design that are otherwise consistent in other places, plus the fact CSS lacks a good "layout manager" that, for example, easily centers a fixed div horizontally and vertically, and you must resort to make a lot of exceptions to the rules you put in place by way of using id's. These exceptions can add up quickly, and most of them really deal with the positioning of the elements rather than font, background, and border specifics.
Obviously if you find a lot of the same font family, size, and other common rules being applied over and over again, there's few justifications for that, but if most of them deal with positioning (margin, padding, top, left, etc) then you should assume they simply have someone who is very particular about how these elements should be positioned.
-
TRWTF is css?
Or web designers who call themselves web developers?
-
@tOmcOlins said:
TRWTF is css?
Or web designers who call themselves web developers?
Or managers who try to be web designers and concider themselves web developers.
"I already did the hard work of drawing it in Photoshop for you. It should take you an hour, tops, to finish the website."
-
@tOmcOlins said:
TRWTF is css?
Or web designers who call themselves web developers?
...and vice versa
