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