代码之家  ›  专栏  ›  技术社区  ›  Merritt

设计表单时设计CSS和表示和内容分离

  •  0
  • Merritt  · 技术社区  · 15 年前

    是否可以使用Blueprint CSS并在表示和内容之间保持相当程度的分离?我喜欢在设计表单时使用框架是多么的简单,但我担心使用CSS类对元素进行列化的方式是一种糟糕的实践。

    例如,假设我有一个使用Blueprint设计的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”的类属性是一种坏做法吗?或者我错过了要点?

    更新

    这一点在以下方面进行了更深入的讨论: THE MYTH OF CONTENT AND PRESENTATION SEPARATION

    2 回复  |  直到 15 年前
        1
  •  1
  •   Azeem.Butt    15 年前

    我想说你错过了重点。如果你想设计这些元素的样式,你必须给它们一个类或ID,不管怎样,只要保持一致,任何命名约定都会变得有意义。那些喜欢抱怨你班级名字的人通常不是很好的设计师。

        2
  •  1
  •   theIV    15 年前

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

    有关使用的详细信息,请参见: http://jdclayton.com/blueprints_compress_a_walkthrough.html

    尤其是你所说的,你应该注意“语义类”部分。