回顾

  在上一篇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:;
padding:;
}
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

SMACSS:一个关于CSS的最佳实践-2.Base Rules的更多相关文章

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

    本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout R ...

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

    什么是SMACSS? SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS.顾名思义,SMACSS是一个可扩 ...

  3. Vue中CSS模块化最佳实践

    Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...

  4. CSS规范 - 最佳实践--(来自网易)

    最佳选择器写法(模块) /* 这是某个模块 */ .m-nav{}/* 模块容器 */ .m-nav li,.m-nav a{}/* 先共性 优化组合 */ .m-nav li{}/* 后个性 语义化 ...

  5. 最重要的 Java EE 最佳实践

    參考:IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 2004 年 IBM® W ...

  6. Git 最佳实践:分支管理

    5月份,为统一团队git分支管理规范,刚开始准备自己写,在网上搜了下,发现不少不错的git分支管理实践.最后我为团队选择了这个git分支管理实践 A successful Git branching ...

  7. SpringBoot系列: Spring项目异常处理最佳实践

    ===================================自定义异常类===================================稍具规模的项目, 一般都要自定义一组异常类, 这 ...

  8. MaxCompute 构建企业云数据仓库CDW的最佳实践建议

    在本文中阿里云资深产品专家云郎分享了基于阿里云 MaxCompute 构建企业云数据仓库CDW的最佳实践建议. 本文内容根据演讲视频以及PPT整理而成. 大家下午好,我是云郎,之前在甲骨文做企业架构师 ...

  9. 使用DataStax Java驱动程序的最佳实践

    引言 如果您想开始建立自己的基于Cassandra的Java程序,欢迎! 也许您已经参加过我们精彩的DataStax Academy课程或开发者大会,又或者仔细阅读过Cassandra Java驱动的 ...

随机推荐

  1. ETL中的数据增量抽取机制

    ETL中的数据增量抽取机制 (     增量抽取是数据仓库ETL(extraction,transformation,loading,数据的抽取.转换和装载)实施过程中需要重点考虑的问 题.在ETL过 ...

  2. 偷懒的inline-block解决方法

    最近这几天看了inline-block的用法,用它来代替浮动实现水平排列很不错,只是要解决一下浏览器兼容和间隙的问题.关于ie6,7的兼容问题 <inline-block 前世今生>(ht ...

  3. UVA1351-----String Compression-----区间DP(记忆化搜索实现)

    本文出自:http://blog.csdn.net/dr5459 题目地址: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&a ...

  4. ubuntu 下编译内核

    目的: 1. 练习.网上有很多类似的文章可供参考. 2. 为写qemu的watchdog驱动练手. 有朋友问make的 watchdog驱动 需要什么准备,所以写这个blog. 环境: ubuntu ...

  5. 07.15 first与first-child的区别

    举例: $("ul li:first");  //选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child&q ...

  6. Address already in use: JVM_Bind <null>:8080

    解决方法: 1重开eclipse,端口号被占用,或者杀掉进程

  7. C#反射调用程序集类中方法

    建立类 class OperatorClass { /// <summary> /// 加法 /// </summary> /// <param name="x ...

  8. ASPxGridView-单元格合并

    <dx:ASPxGridView ID="gridView" runat="server" ClientInstanceName="gvResu ...

  9. android UI-EditText的长度监听慎用TextWatcher

    在用户昵称的输入时,限定8个字符,本意是在输入超过8个时候,页面toast一个提示,就是下面的TextWatcher的监听,在afterTextChanged中处理. 原bug:huawei MT2- ...

  10. 用for循环遍历DataTable中的数据

    for (int i = 0; i < dataTable.Rows.Count; i++) { for (int j = 0; j < dataTable.Columns.Count;  ...