Question

Is it possible to use Blueprint CSS and maintain a a respectable level of separation between presentation and content? I like how easy the framework is to use when designing forms, but am worried that the manner in which I use the css classes for columnizing elements is a bad practice.

For instance, say I have a 3 field form designed using blueprint:

<div class="container">
    <form action="" method="post" class="inline">               
        <fieldset> 
            <legend>Example</legend> 
            <div class="span-3"> 
                <label for="a">Label A:</label> 
                <input type="text" class="text" id="a" name="a" > 
            </div> 
            <div class="span-2"> 
                <label for="b">Label B:</label> 
                <input type="text" class="text" id="b" name="b" > 
            </div> 
            <div class="span-3"> 
                <label for="o">Label O:</label> 
                <input type="checkbox" id="o" name="o" value="true" checked="checked" class="checkbox">checkbox one
            </div> 
            <div class="span-2 last"> 
                <input type="submit" value="submit" class="button"> 
            </div> 
        </fieldset> 
    </form> 
</div>

Is using a class attribute with names like “span-2”, “inline”, and “last” a bad practice? Or am I missing the point?

UPDATE

This is talked about in more depth at:
THE MYTH OF CONTENT AND PRESENTATION SEPARATION

Answer 1

I’d say you’re missing the point. If you want to style those elements you’re going to have to give them a class or ID regardless, and any naming convention can become meaningful so long as it remains consistent. The people who like to complain about the names of your classes generally aren’t very good designers.