Question

One of my biggest trouble with CSS has always been how tricky it is to position stuff appropriately.

Now matter how hard I try to understand things, I always need a couple of tries before I can guess which must be floatted in which direction related to what.

Now, my trouble is, I usually at some point have code like this :

<div class="someContainerThatWillWorkAsALine">
  <div class="someOtherContainerThatWillWorkAsAcolumn">
    <div class="StuffInAcolumn">
      ...
    </div>

The only purpose of classes like this is to say :

• “child, please go from left to right”
• “except you guys, please go from top to bottom”
• “you, stop disturbing your brother and go 5px to the left, you’re grounded”
• “johnny, you’re the last of your breed, please clear all those floating nonsense”

I sometimes come to wonder if I’m writing software, or trying to find the right way to turn the antenna to receive old-style analog TV.

“Ok, just a little more to the right, please…
No, not quite there yet.
Perfect now, don’t move !”

Besides, those classes have no real semantic, so it’s very hard to give them a meaningful name. This makes CSS pretty hard to read, and, even worse, pretty hard to write because I get a panic attack every time I have to choose a name for “yet-another-class-that-simply-tells-a-block-to-act-as-a-line”. Because as every class name is global to your web2.0-y-one-page-site, you don’t want to collide with used names.

So how do you tackle this kind of problems ?
Do you :

• leave the “positioning” (layout?) css code inline with your html, and restrict CSS to actual styling (as in “this should be blue, this should be written in bold, etc…”) ?
• simply have one “act-as-a-line” and “act-as-a-column” class (meaning your html code contains classes that only deals with layout), which kinda defeats the “keep layout out of my html” spirit ? And give a more meaningful class for other cases ?
• use a convention for the names ?

Any ideas welcome.

Answer 1

I understand your pain, but the more you use CSS/html the easier it becomes. To the point that you end up loving it.

Is it worth separating “style” from “layout” in CSS

Yes, absolutely! If you use a layout framework you won’t have all those crazy classes. Then you can concentrate on style. Both the layout and styles will be in a CSS file.

Never inline style – maintain the useful separation of concerns.

This article addresses why the separation of concerns will benefit your website long-term.