Is it worth separating "style" from "layout" in CSS

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.

Answer 2

The approach I take is to separate my CSS rules into three different "sections":

• Layout rules (width, height, padding, margin, floating or not, positioning, etc.)
• Type rules (font size, font weight, etc.)
• Appearance rules (font colour, background colour, CSS3 with vendor prefixes, etc.)

Here's an example from a current project:

    .OrderActionsPane {

    /* --- Layout --- */

    height: 45px;
    padding: 3px;
    border-bottom-width: 1px;

    /* --- Typography --- */

    font-size: 14px;
    font-weight: bold;

    /* --- Appearance --- */

    background: #fff;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ededed));
    background: -webkit-linear-gradient(top center, #fff, #ededed);
    background: -moz-linear-gradient(top center, #fff), #ededed);
    background: -o-linear-gradient(top center, #fff, #ededed);
    background: linear-gradient(top center, #fff, #ededed);

    box-shadow: 0 0 5px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
    -ms-box-shadow: 0 0 5px rgba(0,0,0,.25);
    -o-box-shadow: 0 0 5px rgba(0,0,0,.25);

    border-bottom-style: solid;
    border-bottom-color: #e6e6e6;

}

The reason I do this is that layout rules (box model stuff, mostly) has the largest effect on your layout. Type rules can also affect your layout (if you have a fluid container and increase your font size, for instance, the container may grow). Appearance styles have no effect on your layout.

Notice that I'm separating the border rules. It would be easier to write "border-bottom: 1px solid #e6e6e6" as shorthand, but then you would lose the separation between the appearance and the layout effects of the border.

Other considerations could also be the units you are using in your layout. Px will make for a more solid layout, but if you use percentages or ems for a more mobile-friendly or scalable layout, you may need to do a bit more thinking.

My way isn't necessarily the only one or the best, and the solution may vary depending on the constraints of your platform (whether it allows you to separate rules like this into a "Layout.css" file and a "Theme.css" file, for instance, where the theme file only changes the appearance and can be swapped out for another one for a completely different look).

I think this is something that every front-end dev / CSS coding guy (or girl) bumps up against at some point! As you learn more about CSS, you'll start thinking "There MUST be a better way to do this". Eventually, if you put the effort in, you'll find a solution. :)

Have a look at SMACSS for more food for thought: http://smacss.com/book/type-layout