SMACSS:一个关于CSS的最佳实践-2.Base Rules

回顾

  在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories:

  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

本篇我们将介绍Base Rules。你可以将所有Base Rules放在一个文件,比如 base.css ;当然,也可以不这么做。区分Category的作用是帮助我们区分出不同功能的CSS,提高可重用性,可维护性。

哪些CSS属于Base Rules?

  Base Rules指的是所有元素的默认styles,比如说默认的link style,font styles,body backgrounds等等,也可以理解为为了屏蔽浏览器的差异,而对所有元素重新定义的一类CSS。 Normalize.css 和 Reset.css 是典型的Base Rules。笔者建议以 Normalize.css 为基础,根据自己的实际情况添加,形成自己的 base.css 。

Base styles例子

body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}

Base Rules最佳实践

  根据Base Rules的定义,我们可以很容易的理解如下最佳实践。

  Base Rules可以出现如下CSS选择符:

  1. element selector
  2. descendant selector
  3. child selector
  4. pseudo selector

  相反,以下选择符不应该出现在Base Rules中:

  1. class selector
  2. ID selector
  3. !important

  如果违背了上述最佳实践,那么显然,你应该仔细回忆下Base Rules的定义,并再次确认究竟哪些CSS应该放在Base Rules下面。

相关阅读

  上一章 SMACSS:一个关于CSS的最佳实践-1.Overview

  下一章 SMACSS:一个关于CSS的最佳实践-3.Layout Rules

 

posted on 2015-04-19 19:59  majiangl  阅读(698)  评论(0编辑  收藏  举报