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驱动的 ...
随机推荐
- GitHub 菜鸟使用
之前有用过一次,但是一直弄不明白怎么用,今天我又试了一下,成功了,现在我就记录下来,为了以后的使用以及帮助那些跟我原先一样不会用的同学 进入正题: Step 1: 注册GitHub账号 https:/ ...
- vmware 使用技巧
1.虚拟机如何进入BIOS界面? 方法: 1) 开机按F2 2) 若来不及按F2的话,可以通过以下 2. 如何让虚拟机进入安全模式? 方法:开机快速按F8 3. 当不能连接到vCenter Serve ...
- delphi高手突破学习笔记之面向对象类和对象的本质
知识点1:堆和栈 每个应用程序可以获得的内存空间分为两种:堆(heap)和栈(stack). 堆又称为“自由存储区”,其中的内存空间的分配与释放是必须由程序员来控制的.例如,用GetMem函数获取了一 ...
- Paxos算法小结
转自不正直的绅士,因百度空间迁移,无法注明出处,我从其google搜索引擎中的cache进行的copy. 不正直的绅士 是跟我一起工作过的非常有才的一个青年才俊. Paxos的使用非常广泛.sanlo ...
- centos6 qt ENV
打算做嵌入式图像处理,计划方案嵌入式Linux+OpenCV+QT,昨天简单入门OpenCV今天看看QT,QT就先弄Linux下面的,回家之前争取把基本的摸通,然后能在板子上跑起来 关于QT安装 QT ...
- python 【第四篇】:面向对象(一)
1.前言 提笔忘字,感慨良多!python自习前前后后有一年多了吧,貌似花了不少时间,其实没学到啥东西,都是在面向对象编程之前基础知识这块一直打转转,每次到了面向对象这块就感觉很蒙,看两天直接放弃,从 ...
- SQL学习之使用视图
1.简介:视图是虚拟的表.与包含的数据不一样,视图只包含使用时动态检索数据的查询.重点:视图是一个查询,不是一个表!
- ##DAY14——StoryBoard
•iOS下可视化编程分为两种⽅式:xib和storyboard. •在使用xib和storyboard创建GUI过程中,以XML文件格式 存储在Xcode中,编译时生成nib的二进制文件.在运行时, ...
- BZOJ 2716: [Violet 3]天使玩偶( CDQ分治 + 树状数组 )
先cdq分治, 然后要处理点对答案的贡献, 可以以询问点为中心分成4个区域, 然后去掉绝对值(4种情况讨论), 用BIT维护就行了. --------------------------------- ...
- Hash表的使用
Hash表能够实现在O(1)时间内对数据访问,虽然空间复杂度很高,但是时间复杂度很好.所以下面说一些使用Hash的算法. 第一个只出现一次的字符 利用Hash可以实现统计字符的个数,然后在遍历一次得到 ...