css3技术

CSS架构目标(4)

字号+ 作者:H5之家 来源:H5之家 2015-09-09 11:03 我要评论( )

12345678910111213141516.modal { @extend %dialog; @extend %drop-shadow; @extend %statically-centered; /* other modal styles */} .modal__close { @extend %dialog__close; /* other close button styles */}

12345678910111213141516.modal {    @extend %dialog;    @extend %drop-shadow;    @extend %statically-centered;    /* other modal styles */}   .modal__close {    @extend %dialog__close;    /* other close button styles */}   .modal__header {    @extend %background-gradient;    /* other modal header styles */}

  CSS Lint

  CSS Lint是由Nicole Sullivan和Nicholas Zakas编写的一款代码质量检测工具,帮助CSS开发人员写出更好的代码。他们的网站上是这样介绍CSS Lint的:

  CSS Lint是一个用来帮你找出CSS代码中问题的工具,它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题,规则是可以扩展的。

  使用CSS Lint建议:

  1.不要在选择器中出现ID。

  2.在多部分规则中,不要使用非语义(non-semantic)类型选择器,例如DIV、SPAN等。

  3.在一个选择器中使用的连接符(combinator)不要超过2个。

  4.任何类名都不要以“js-”开始。

  5.如果在非“I-”前缀规则里经常使用布局和定位应给予警告

  6.如果一个类定义后被重新定义成子类,也应给予警告。

  总结

  CSS不仅仅是视觉设计,也不要因为你编写CSS就随便抛出编程的最佳实践。像OOP、DRY、打开/闭合、与内容分离等这些规则应该应用到CSS里面。无论你如何组织代码,都要确保方法真正帮助到你,并且使你的开发更加容易和可维护的。

  英文原文:CSS Architecture

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML CSS网页基础开发教程第1讲01

    HTML CSS网页基础开发教程第1讲01

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲02

    HTML CSS网页基础开发教程第1讲02

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲03

    HTML CSS网页基础开发教程第1讲03

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲04

    HTML CSS网页基础开发教程第1讲04

    2015-10-02 16:42

网友点评