• CSS这样写性能才高
  • Victor 发表于 2016/3/2 9:50:00 | 分类标签: CSS教程 CSS书写规范
  •  1、解析网页模式和DTD

    (1)解析网页模式主要有标准模式和怪异模式。怪异模式是为了兼容老式浏览器下的代码,应该避免触发怪异模式,选用标准模式。
    (2)DTD(Document Type Definition),即文档类型定义,是一种保证 HTML 文档格式正确的有效方法,可以通过比较 HTML 文档和 DTD 文件来看文档是否符合规范,以及元素和标签使用是否正确。
    (3)按照 W3C 的标准,需要在 HTML 的最开始声明文件的 DTD 类型。如果漏写 DTD 声明,Firefox 会按照标准模式来解析网页,但在 IE 中就会触发怪异模式。

    2、如何组织 CSS

    (1)应用 CSS 的能力分为两部分:一是 CSS 的 API,重点是如何用 CSS 控制页面内元素的样式;二是 CSS 框架,重点是如何对 CSS 进行组织。其中,如何更好地组织 CSS 是编写高质量 CSS 的关键。
    (2)推荐的组织 CSS 的方法:base.css + common.css + page.css
    (3)base 层:位于三者的最底层,提供 CSS reset 功能和力度最小的通用类—原子类。

    • base 层相对稳定,基本上不需要维护。

    • CSS reset:一开始就将浏览器的默认样式全部去掉,通过重新定义标签的样式,覆盖浏览器提供的默认样式。

    • 通用原子类是一系列常用的基本类,包括:文字、定位、长度和宽度。
    • “通用性”表现在它们是网站最常用的类,任何页面都可以随意使用。
    • “原子性”表现在它们是最基础的样式,一个类只设置一个样式,不可再分。

    (4)common 层:位于中间层,提供组件级的 CSS 类。

    • common 层是网站级的,不同的网站有不同的 common 层,同一个网站只有一个 common 层。
    • 在团队合作中,common 层最好由一个人负责,统一管理。
    (5)page 层:位于最高层,提供页面级的样式。

    • page 层是页面级的,每个页面都有自己的 CSS

    3、模块化 CSS——在 CSS 中引入面向对象编程思想

    (1)如何划分模块——单一职责
    • 模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。
    • 模块应在保证数量尽可能少的原则下,坐到尽可能简单,以提高重用性。

    (2)CSS 的命名——使用命名空间
    • 命名结合骆驼命名法和划线命名法来进行命名,其中骆驼命名法用于区别不用单词,划线用于表明从属关系。
    (3)挂多个 class 还是新建 class——多用组合,少用继承

    4、低权重原则——避免滥用子选择器

    (1)CSS 的选择符都是有权重的,当不同的选择符的样式设置有冲突时,会采用权重高的选择符作为设置的样式。权重的规则:HTML 标签的权重为 1,class 的权重为 10,id 的权重为 100。
    (2)如果 CSS 的选择符权重相同,那么样式会遵循就近原则,那个选择符最后定义,就采用哪个选择符的样式。
    (3)使用子选择器,会增加 CSS 选择符的权重,从而对其他选择符产生影响,所以应该尽量使用子选择器。为了保证样式容易被覆盖,提高可维护性,CSS 选择符需要保证权重尽可能低。

    5、CSS sprite

    (1)CSS sprite 技术是将网站的多张背景图片合并为一张,然后利用 background-position 属性来展示所需要的部分。
    (2)CSS sprite 主要能解决试用多张图片加载时出现空白的问题,以及减少 HTTP 请求次数,从而降低服务器的压力。
    (3)CSS sprite 技术的使用范围:

    • 只能合并用于背景的图片,对于\设置的图片,不能合并到 CSS sprite 中。
    • 对于横向和纵向都平铺的图片,也不能使用 CSS sprite。对于需要横向平铺的图片,合并的图片只能垂直排列;对于需要纵向平铺的图片,合并的图片只能水平排列。

    6、CSS 常见问题

    (1)id 和 class:同一个网页中,相同的 id 只能出现一次,不可重复,而 class 可以任意出现多次,因此,应尽量使用 class,少用 id。
    (2)超链接标签样式问题:a 标签的四种状态需要排序才能发挥作用,顺序是 link -> visited -> hover -> active,也叫做 love hate 原则,即 l(link)ov(visited)e h(hover)a(active)te。
    (3)块级元素和行内元素的区别:

    • 块级元素会独占一行;行内元素不会独占一行
    • 块级元素可以设置 width、height 属性;行内元素设置 width、height 属性无效
    • 块级元素可以设置 margin 和 padding 属性;行内元素设置 margin 和 padding 属性,水平方向(margin-left、margin-right、padding-left、padding-right)有效,垂直方向(margin-top、margin-bottom、padding-top、padiding-bottom)无效

    • 块级元素的 display 属性对应 display: block;行内元素的 display 属性对应 display: inline。可以通过修改 display 属性来切换块级元素和行内元素

    (4)png图片:IE 6 下对 png 的透明支持不好,可以利用滤镜功能来解决问题,格式:progid: DXImageTransform.Microsoft.AlphaImageLoader(src='png图片路径', sizingMethod='crop')
    (5)多版本 IE 并存方案:CSS 的调试利器 IETester
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:Victor
  • 加入时间:2013/5/16 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮