SMACSS:一个关于CSS的最佳实践-2.Base Rules
回顾
在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories:
- Base
- Layout
- Module
- State
- 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选择符:
- element selector
- descendant selector
- child selector
- pseudo selector
相反,以下选择符不应该出现在Base Rules中:
- class selector
- ID selector
- !important
如果违背了上述最佳实践,那么显然,你应该仔细回忆下Base Rules的定义,并再次确认究竟哪些CSS应该放在Base Rules下面。
相关阅读
上一章 SMACSS:一个关于CSS的最佳实践-1.Overview
下一章 SMACSS:一个关于CSS的最佳实践-3.Layout Rules
SMACSS:一个关于CSS的最佳实践-2.Base Rules的更多相关文章
- SMACSS:一个关于CSS的最佳实践-3.Layout Rules
本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout R ...
- SMACSS:一个关于CSS的最佳实践-1.Overview
什么是SMACSS? SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS.顾名思义,SMACSS是一个可扩 ...
- Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
- CSS规范 - 最佳实践--(来自网易)
最佳选择器写法(模块) /* 这是某个模块 */ .m-nav{}/* 模块容器 */ .m-nav li,.m-nav a{}/* 先共性 优化组合 */ .m-nav li{}/* 后个性 语义化 ...
- 最重要的 Java EE 最佳实践
參考:IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 IBM WebSphere 开发人员技术期刊: 最重要的 Java EE 最佳实践 2004 年 IBM® W ...
- Git 最佳实践:分支管理
5月份,为统一团队git分支管理规范,刚开始准备自己写,在网上搜了下,发现不少不错的git分支管理实践.最后我为团队选择了这个git分支管理实践 A successful Git branching ...
- SpringBoot系列: Spring项目异常处理最佳实践
===================================自定义异常类===================================稍具规模的项目, 一般都要自定义一组异常类, 这 ...
- MaxCompute 构建企业云数据仓库CDW的最佳实践建议
在本文中阿里云资深产品专家云郎分享了基于阿里云 MaxCompute 构建企业云数据仓库CDW的最佳实践建议. 本文内容根据演讲视频以及PPT整理而成. 大家下午好,我是云郎,之前在甲骨文做企业架构师 ...
- 使用DataStax Java驱动程序的最佳实践
引言 如果您想开始建立自己的基于Cassandra的Java程序,欢迎! 也许您已经参加过我们精彩的DataStax Academy课程或开发者大会,又或者仔细阅读过Cassandra Java驱动的 ...
随机推荐
- [LeetCode][Python]Palindrome Number
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/palindr ...
- Pascal 线段树 lazy-tag 模板
先说下我的代码风格(很丑,勿喷) maxn表示最大空间的四倍 tree数组表示求和的线段树 delta表示增减的增量标记 sign表示覆盖的标记 delta,sign实际上都是lazy标志 pushd ...
- 从零开始Unity3D游戏开发【2 简单的水管工例子】
1.首先,创建一个新的Project. 2.hierarchy(层)窗体下的Create下添加一个plane(平面) 3.调整Main Camera的视角,让panel显示在Game窗体.这一步比较困 ...
- VS2012 TFS切换账号登录
最近要做团队项目,用到的vs2012的tfs代码管理器(win7 +vs2012),切换账号的流程如下: 1.打开控制面板,进入用户账户 2.点击左侧的管理您的凭据,看到自己的TFS服务器的地址,然后 ...
- GWT RPC机制
GWT RPC GWT RPCRemote Procedure Calls GWT: Google Web Toolkit的缩写,有了 GWT可以使用 Java 编程语言编写 AJAX 前端,然后 G ...
- 在工作空间中构建和使用catkin包
在这篇博客中将会介绍,如何在工作空间中构建和使用一个包. 首先,我们来看一下如何在catkin工作空间中,使用catkin_make工具从源文件构建和安装一个包.使用catkin_make来构建一个c ...
- mysql中判断表中是否存在某条记录
SELECT CASE WHEN EXISTS (SELECT * FROM usergroupmap WHERE groupId = groupIdIn AND userId = v_friendI ...
- 几本不错的开源书(to be continued)
Linux 1.working-on-gnu-linux GNU/Linux 至今已經相當成熟並足以應付日常生活之使用,凍仁也於 2009 年開始使用它來工作至今,將藉由此書 1 來撰寫較有系統的文章 ...
- 在FL2440上使用kei MDK 调试程序(J-link)
<一>新建一个工程 单击Project ->New µVision Project...菜单项 <二>选择CPU 这里我们选择三星的2440A 点击OK后会提示你是否添加 ...
- android-SQLite 和 Content
SQLite 游标(Cursor)相当于指向底层数据中结果集的指针,而不是提取和返回结果值的副本,是在结果集中对位置(行)进行控制的管理方式. moveToFirst:把游标移动到查询结果的第一行 m ...