设计表单时的蓝图 CSS 以及演示文稿和内容的分离

Question

是否可以使用 Blueprint CSS 并在表示和内容之间保持相当程度的分离？我喜欢框架在设计表单时的易用性，但担心我使用 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”、“inline”和“last”的类属性是一种不好的做法吗？或者我错过了重点？

更新

对此进行了更深入的讨论： 内容与呈现分离的神话

Answer 1

我想说你没有抓住重点。如果你想设计这些元素的样式，无论如何，你都必须给它们一个类或ID，并且只要保持一致，任何命名约定都可以变得有意义。喜欢抱怨类名的人通常都不是很好的设计师。

Answer 2

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

有关使用的详细信息可以在这里找到：http://jdclayton.com/blueprints_compress_a_walkthrough.html

特别是对于您所谈论的内容，您应该注意“semantic_classes”部分。