模块化css

Posted 2021-09-13 star

模块化css是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且互相之间没有依赖关系。当我们需要变更样式时不会影响到其它部分。

基础样式

默认的样式，是对单个元素选择器（包括其属性选择器，伪类选择器，孩子/兄弟选择器）的基础样式设置，例如html, body, input[type=text], a:hover, etc.推荐个base库-normalize.css，它消除了不同浏览器渲染的不同

html, body {
  margin: 0;
  padding: 0;
}

input[type=text] {
  border: 1px solid #999;
}

a {
  color: #039;
}

a:hover {
  color: #03C;
}

模块

页面拆分为不同的模块，给这些模块编写独立样式，模块与子模块之间一般以下横线连接

//下拉
.dropdown, .dropdown > ul {
  display: inline-block;
  border: 1px solid #283AE2;
}

.dropdown li:hover {
  background-color: #999;
}
//media
.media{padding:30px;background-color:#eeeee};
.media_title{
   font-size:16px;
   font-weight:bold
}

修饰类

对一个模块进行修饰，一般以双横线相连。下面以button模块为例

.btn{
  padding: .3em 1em;
  font-size: 14px;
  outline: none;
  color: #333333;
  cursor: pointer;
  border: 1px solid #eee
}
.btn--small{
  font-size: 12px;
}
.btn--large{
  font-size: 16px;
}

状态类（一般配合js来进行样式切换）

状态类一般以is-或者has-开头，这样的状态类一般来描绘模块当前状态下的一些特征。比如is-expanded、is-loading或者has-error

//input
input.is-error{
  color:red
}
//tab
.tabs {
  border: 1px solid #e8e8e8;
}
.tabs > .tab{
  color:#333333;
  border:none;
}
.tabs > .tab.is-active {
  border-bottom: 1px solid red;
  color: #29A288;
}

工具类

有时候我们需要一个类来做一件简单的事，比如让文字居中，让元素显示，隐藏，左浮动等

.text-align{
  text-align: center!important;
}
.float-left{
  float: left!important;
}
.show{
  display: block!important;
}
.hide{
  display: none!important;
}

这里用到了important,因为我们在使用这些工具类时肯定是为了它的样式，所以要把优先级提到最高，防止覆盖

注意点

1、千万不要使用基于页面位置的后代选择器

比如header和footer都有button，但是header中的是红色字体，那么我们不能写header .btn这样的类，而是应该给button增加修饰类btn--danger

.header .btn{
  color:red
}//错误写法
.btn--danger{
  color:red
}//正确写法

2、不要使用像buttn-20px这样精确的修饰符，会为后续修改带来很大的麻烦

3、不要滥用工具类，对于大部分网站来说，最多十几个工具类就足够了

4、页面开发时，应该是以css来驱动html设计。尽量使用css模块库中已经存在的模块来设计html模块结构，酌情使用修饰类来适应不同