Blueprint CSS and Separation of Presentation and Content When Designing Forms
- by Merritt
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?
