• 警惕Div和Class的滥用


    大概在06年的时候,我刚接触Div+Css的网站布局,那个时候大家对于标准的热情非常高涨,蓝色论坛里经常为了Table还是Div+Css而争论的热火朝天。现在,大家已经形成了共识,Table用来布局是不行的,但是网页里完全不用Table,也是不好的。

    于是大家就开始都用Div+Css布局,这样做的目的本来是为了让网页文档更语义化、结构更加清晰、代码更加少、便于维护,这是一个非常好的目标。但是事实告诉我们,有好的目标,不一定能够做出好的事情来。紧接着,就开始出现了Div和Class的过渡使用。特别是在借用了一些Css框架,诸如960.gs,YUI Grid 这样的CSS框架的时候,我们会不自觉的多使用一些Div。

    这些CSS框架为我们提供了一套解决方案,使用框架确实能为我们节省不少的时间(其实,我们如果经常写页面的话,也会积累一些常用的CSS,但是并没有汇集成框架),但同时也减少了我们自主考虑的空间,增加了我们的惰性。

    以 960.gs 为例,这是一个很著名的理论,国内的一些博客上曾经做过介绍,其原则就是将960px的宽度进行不同程度分割,来达到标准化、模块化使用的目的。如下图,通过使用 960.gs 只需要一个简单的 class 就可以为我们提供不同的标准分割。

    image 在其内部,我们可以按照自己的规划进行布局。

    image 可以看到,这套框架非常好用,但同时,我们不可避免要使用很多的Div以及Class,按照这套框架的要求来进行结构的编写,同时,加上我们页面中个性化的内容时,过度就开始了。

    为了避免这种情况,有几个原则可以遵循:

    1、只使用必要地类。特别是框架提供的类,需要那种布局,就明确使用哪种类;
    2、在除了 html、head、meta、param、script、title、style之外的元素上,都可以使用类,所以如果希望实现三栏的布局,不必一定要 <div class="grid_3"><img src… 完全可以直接在 img 标签上使用 class="grid_3",这样,无疑就减少了三对 div 的使用。而且,有时候这样用起来,更加符合语义文本的目标。
    3、在父元素中使用类,而不是在每个子元素中都加。这个貌似是地球人都知道的规则,但其实真正在实际过程中,如果没有对于样式结构及其继承关系做规划的话,很容易的就需要在子元素中写上很多的特殊的类。这就要求我们必须具有抽丝剥茧的精神,将可以共用的元素样式都抽取到上一级元素上。

     

    参考资料:
    1、Fight Div-itis and Class-itis
    2、960 Grid System
    3、YUI2 Grid CSS

  • 相关阅读:
    [LeetCode#114]Flatten Binary Tree to Linked List
    [LeetCode#103]Binary Tree Zigzag Level Order Traversal
    [LeetCode#102]Binary Tree Level Order Traversal
    [LeetCode#145]Binary Tree Postorder Traversal
    [LeetCode#]Binary Tree Preorder Traversal
    [LeetCode#144]Binary Tree Preorder Traversal
    [LeetCode#94]Binary Tree Inorder Traversal
    [LeetCode#101]Symmetric Tree
    [LeetCode#100]Same Tree
    [LeetCode#104, 111]Maximum Depth of Binary Tree, Minimum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/cocowool/p/1704363.html
Copyright © 2020-2023  润新知