Is CSS layout really as delicate as it seems to be?

Question

I have been experimenting with the Majestic template at freecsstemplates.org. So far so good; I really like the look (or to be more specific, my boss really likes the look).

However, I am noticing that the CSS that drives this template seems very brittle; small changes can cause really radical breakage. In particular, if I reduce the size of the header in the CSS (to eliminate some of the empty space at the top of the page), both of the outside columns suddenly disappear.

With small websites, sometimes I cry uncle and just use tables for layout. I realize this is heretical; should I be leaving the design to the professional designers? Or maybe I'm going about this the wrong way, and someone can set me straight.

Answer 1

I agree most css template is hard to read, and different people may have a very different approach to the same layout strategy. Since there are too many hacks/tricks/techniques in css it is really fragile when you try to modify those existing one since almost all cases, the styles are very dependent to each other.

Answer 2

CSS in my experience is easy to understand in concept, but takes a long time to master.
Brittle CSS can be very brittle, but good CSS can be wonderfully flexible.

Answer 3

CSS is delicate, but still easier to deal with than a site full of table layouts. I found Dave Shea's book CSS ZenGarden to be a great help in learning CSS from a designers perspective.

Often in layered templates there are a few places where changes to CSS can be made, and it can be really confusing to follow which selectors are controlling the element you wish to manage. There are many tools out there that can help, but some that have been useful to me are:

• Google Chrome and its Inspect Element option
• Selector Gadget - a bookmarklet that will help you visually determine the selectors that affect an element
• Firefox's Web Developer plug in

One other tip is to learn about the !important modifier - it can come in handy to force a particular property setting when there are multiple CSS selectors affecting the same element.

Answer 4

I honestly think this layout has been made pretty badly. The width of the elements seems to change where they appear on the page, and they're all need to be pixel perfect for everything to be centred.

For some bizarre reason the whole page has been placed inside the div element marked 'header'... This doesn't make much semantic sense for a start.

However, it seems if you decrease the width of every element which has one, then everything does get smaller, and nothing should disappear.

I would recommend looking at some other more sensible layouts, since I don't think this is a very good way of attaining that style -- as you've said, it's brittle. Have you tried using the extension Firebug for firefox? It allows you to make on-the-fly changes to the css, and see how it affects the style, which will help you learn fast.

Answer 5

As it stands CSS can either make layouts wonderfully simple and flexible or it can make the simplest of tasks an absolute nightmare.

Purists will tell you to use CSS no matter what, a pragmatist will tell you to use what works. If using a table or non-CSS solution makes something infinitely easier to do, then use it!

Personally I try to use pure CSS as much as possible, but there have been times when I want to do nothing but swear when something glorious in FireFox looks awful in IE. This is where the hacks come in. It is these hacks and work arounds that tend to make CSS brittle in the first place.

Half the problems with CSS would go away if all the browsers did precisely what the CSS spec says they should do. Alas, this is yet to happen so we have to live with either using tables, or on occassion, brittle CSS.

The best solution is to make the design as simple as possible. If you find you have a hundred divs and lots of CSS trickery to do something straight-forward, stop. Re-think how you are approaching it and try again.

At the end of the day your website users don't really give a monkeys what your website looks like as long as they can get at the information they want with minimum effort. Successfully manage that and they will not care how photorealistic that shiny nav bar is, or how well the borders line up etc.

That's my 18pence at any rate :)

Answer 6

Css doesn't break as long as you don't break it ;) It's a language. Just like a regular one, if you don't use proper grammar people won't understand what your saying. If a layout doesn't work or suddenly your page looks rubbish, I'll guarantee you it's your fault. Css isn't brittle, the code you wrote with it might be.

So start by learning the basics and don't just dive into some file you found online which might (in your case, does) contain very bad code.

If you end up wanting to use tables for everything may I suggest you start looking at some grid systems like http://960.gs/ and ease your pain.

Gideon