设计表单时的蓝图CSS和表示与内容的分离

Question

是否有可能使用Blueprint并在表示和内容之间保持一个体面的分离水平？我喜欢在设计表单时使用框架是多么容易，但我担心我使用css类对元素进行列列的方式是一种糟糕的做法。

例如，假设我有一个使用蓝图设计的3字段表单：

<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>

使用名称为"span-2“、”内联“和”最后“的类属性是否是一种糟糕的做法？还是我漏掉了重点？

更新

更深入地讨论这一点，请参见：内容与呈现分离的神话

Answer 1

我得说你没抓住重点。如果您想对这些元素进行样式化，那么您将不得不给它们一个类或ID，而且只要它保持一致，任何命名约定都可以变得有意义。喜欢抱怨你的课程名称的人通常不是很好的设计师。

Answer 2

我想说这是不好的做法。您应该想出更有意义的类名和ids，这些名称和ids直接应用于您的标记，然后使用那些“使用”的东西，比如span-2和last。这可以使用蓝图的compress.rb来完成。

有关使用的详细信息可以在这里找到：walkthrough.html

特别是你所说的，你应该注意"semantic_classes“部分。