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驱动的 ...
随机推荐
- CSS自学笔记(7):CSS定位
很多时候,我们需要对一些元素进行自定义排序.布局等,这是就需要用到CSS的定位属性了,用这些属性对一些元素进行自定义排序.布局等操作,可以改变浏览器默认的死板的排序. CSS定位的功能很容易理解,它允 ...
- Activity四种launchMode
更多内容在这里查看 https://ahangchen.gitbooks.io/windy-afternoon/content/ 总共有四篇关于Activity,task,launchMode的文章, ...
- 接收时物料必须为Active状态
应用 Oracle Inventory 层 Level Function 函数名 Funcgtion Name RCV_RCVRCERC 表单名 Form Name RCVRCERC 说明 Descr ...
- Apriori算法
APRIORI Apriori算法是一种挖掘关联规则的频繁项集算法,其核心思想是通过候选集生成和情节的向下封闭检测两个阶段来挖掘频繁项集.而且算法已经被广泛的应用到商业.网络安全等各个领域. Apri ...
- Http静态资源的缓存
最近一段时间一直在研究页面缓存和压缩方面的东西,由于公司服务器使用的是iis6.0,很多性能方面的优化都不支持.所以,就开始尝试着自己写个简单的处理程序. 为了减少服务器带宽的需求,我们要减少客户端与 ...
- 截取字符串一之substring
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在.NET中快速创建一个5GB、10GB或更大的空文件
对于通过UDP进行打文件传输的朋友应该首先会考虑到一个问题,那就是由于UDP并不会根据先来先到原则进行发送,也许你发送端发送的时候是以包1和包2的顺序传输的,但接收端可能以包2和包1 的顺序来进行接收 ...
- Pat(Advanced Level)Practice--1043(Is It a Binary Search Tree)
Pat1043代码 题目描写叙述: A Binary Search Tree (BST) is recursively defined as a binary tree which has the f ...
- xcode UIButton创建、监听按钮点击、自定义按钮 、状态 、内边距
代码创建 //创建UIButton UIButton * btnType=[[UIButton alloc]init]; //设置UIControlStateNormal状态下的文字颜色 [btnTy ...
- 【原创】重绘winform的GroupBox
功能:重绘winform的GroupBox,以便调整边框颜色和边框宽度 using System; using System.Collections.Generic; using System.Com ...