CSS学习笔记

时间 2019-11-21

标签 css 学习笔记栏目 CSS 繁體版

原文原文链接

精通css

主要为读书笔记，也有一些技巧。喜欢点个赞哟，谢谢。css

css编写原则

分离css和html的关注点：html负责标签，css负责样式html
关注html语义化，便于阅读，便于爬虫（seo）前端

不要使用font等样式标签
使用h5的结构标签，header、footer、nav、section等
div和span是非语义化标签，被用做钩子绑定class类名，添加样式
i和b标签，仅仅表示斜体和加粗，而em和strong有强调的语义，从语义化角度应该使用后者
好的语义化标准：去掉css样式，文档可以正常阅读
ie9支持全部h5标签（额，暂未验证！）

最小的颗粒是组件/函数，方便复用（Small pieces, loosely joined）

// 清除浮动函数
  .cf:before, .cf:after { content: " "; display: table; }
  .cf:after { clear: both; }
  .cf { *zoom: 1; }
复制代码

渐进加强：浏览器遇到没法识别的属性时候会自动丢掉css3
- <input type="email" />，若是浏览器不支持email类型，则自动回退到默认值text
- css设定background: #000; background: rgba(0,0,0,1)，若是浏览器不支持rgba，则会自动丢弃rgba样式
私有属性：先私有后标准git

webkit-box-shadow: 0px 5px 15px #EFEFEF;
  box-shadow: 0px 5px 15px #EFEFEF;
复制代码

检测是否支持属性@supports（笔者还没有在实际中应用）

@supports(display: grid){
      若是支持grid，则下述css讲做用。
  }
复制代码

css模块化

命名模块化：BEM、OOCSS、SMACSS
css in js：在js中写样式，采用行内样式（style），不须要查询类
css modules：经过生成独一无二的类名，避免外部样式污染、内部样式泄露

css优化：压缩/减小请求次数/尽量提早早的加载

link引用CSS，会并行下载；@import引入，会依次下载github

渐进式加强和优雅降级

优雅降级，针对高级浏览器设计网站，后期对于“过期”浏览器进行降级调整。
渐进加强，以基础版本开始，不断扩充。

css基础

选择器类型

标签：div{}
ID:#app{}
class: .banner{}
通配符：*{}
子代：p > span{}，
兄弟[~ +]：li + li{}
后代：p span{}
分组：html,body{}
属性：input[type="radio"]{}
伪元素（::after）：div::after{clear: both}
伪类（:hover,focus,active,first-child,nth-of-child）：a:hover{}

补充说明下，选择器的妙用：web

nth-child(-n + 3) 只选中前3个元素，更多案例
input伪类选择器：required、focus、valid、invalid、checked、target、placeholder、read-only

选择器等级

行内样式大于引入样式：<p style="color: red;"></p> >>> style/link
后来居上：p{color: red;} <<< p{color: yellow;}
important会提升等级：.app .banner{color: red} <<< .banner{color: yellow !important;}
在写a标签伪类样式时，应该遵循:link，:visited，:hover，:focus，:active顺序，由于选择器等级相同
选择器等级计算表

属性继承

默认继承属性：font/table等样式
主动声明继承：inherit

// 有继承性的属性
一、font字体，color、font-size等。
二、文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color等。
三、表格属性：caption-side、border-spacing、border-collapse。
四、列表属性：list-style等。
五、全部元素可继承：visibility、cursor等。

// 无继承性的属性
一、display、width、padding、margin、float、position、max-height、overflow、z-index等等。
二、文本属性：vertical-align、text-decoration、text-shadow、white-space等。
三、背景属性：background等
四、轮廓样式：outline等。
五、清除浮动：clear等。
六、内容：content等。
复制代码

文档流和盒模型

文档流、盒模型，控制着元素的排布。算法

正常文档流：自上到下，自左到右，依次排布
脱离文档流：float、position、fixed等元素，脱离正常文档流
盒模型：content、padding、border、margin、outline（outline不影响布局）
box-sizing控制着应该如何计算一个元素的总宽度和总高度

以下面demo，定义了padding: 20px; width:33.3%，默认状况下会发生换行，若是设置box-sizing:border-box;，则width = border + padding + 内容的宽度浏览器

margin边距叠加

元素在排布时，margin会发生叠加现象，具体说来：兄弟外边距叠加，父子外边距叠加。sass

外边距叠加有利于文本排版，可是有时候咱们不想要这个效果，怎么办呢？

不发生外边距叠加的条件：浮动元素不与其余元素叠加，bfc不与子元素叠加，inline-block不与任何元素叠加

浮动的特性

浮动元素会脱离文档流，为兼容ie9及如下浏览器，业务中常常须要使用浮动布局方案。

浮动效果，块元素和行内元素效果以下：

清除浮动是很是常见的需求，最佳清除浮动代码：

.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
复制代码

元素的包含块

若某元素position:absolute; left: 50px;，他的定位基准是谁？若某元素width:100%，它的计算基准元素是谁？

这里引出了一个重要概念---包含块。包含块也会影响元素的布局，它决定了如何解释各类属性（如何计算值，及定位依据）？

如何肯定元素的包含块？

html、body均为包含块
普通元素（realative/static/float），其包含块为父元素（块级元素、td、th）
absolute定位元素，其包含块为position不为static的父元素，或者根元素
fixed定位元素，其包含块为当前窗口或transform变化元素

如何计算元素的属性值？

通常属性参照当前元素的包含块进行计算
transform: translate(10px, 0)参照元素自身Border-box
position: relative定位元素，其left/top参照自身，其他以父元素Content-box为基准
position: absolute定位元素，以父元素Padding-box为基准

左侧图片的高度未知，你有办法让右侧p标签与img同高吗？（禁用flex、grid、table）查看demo

<div class="box">
  <img class="left" src="xxx.jpg"/>
  <p class="right">hello world!</p>
</div>
复制代码

层叠上下文和层叠顺序

层叠上下文是三维概念，设想元素在垂直屏幕的Z轴上。

如何建立层叠上下文？

根元素（html）、z-index不为auto的绝对/相对定位、z-index不为auto的flex子元素、opacity小于1的元素、transform不为nonde的元素、filter不为nonde的元素、will-change元素等等

在层叠上下文中，其元素依据z-index的值进行排布，排布的规则以下：

层叠上下文能够包含在其余层叠上下文中，以下面的demo，C元素在B的层叠上下文中排布，B元素同A、D元素依据层叠顺序进行排布。

更详细的层叠上下文和层叠顺序推荐阅读：深刻理解CSS中的层叠上下文和层叠顺序

BFC & IFC & FFC & GFC

格式上下文也是很是重要的概念，影响着元素布局的效果。

如何建立块级格式上下文（BFC）？

根元素（html）、浮动元素、absolute/fixed定位元素、inline-block元素、overflow不为visible元素、flex的直接子元素、grid的直接子元素、table-cell/table-caption/table-row/..等

BFC有以下特性：

Bfc为独立容器，内部元素的margin等不会影响到外部元素布局！（body为bfc！）
bfc内部的box，会发生margin重叠！
bfc不会与浮动元素发生重叠！
bfc在计算高度时，会考虑内部浮动元素的高度！
bfc内的box自上而下依次排布，每一个box占据一行

BFC规则的应用很是多，下面是基于BFC规则实现的浮动两栏布局：

如何建立行内格式上下文（IFC）？

仅包含内联级别元素时会建立一个IFC（lineBox），IFC的高度基于line-height和vertical-align进行计算（不受pading/margin影响），其宽度由浮动状况和它的包含块决定，当宽度很大时会发生跨行（拆散为多个ifc）

基于IFC规则实现的幽灵元素居中：

.user::before的定义是ifc的高度等于300px，经过设定vertical-align:middle使得居中对齐。另外，请关注span {width: 190px;}，若是未设定宽度是什么效果？为何会这样？

<div class="user">
  <span>hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world!</span>
</div>

.user{
  position: relative;
  height: 300px;
  width: 300px;
  border: 1px solid #000;
  text-align: center;
}
.user::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
  width: 190px;
}
复制代码

若是未给span设定宽度，span元素将没法居中！猜想缘由以下：1.文本建立了一个ifc，若span未设置宽度，则其宽度由文本内容的宽度决定；2.未设定190px属性，则宽度占满父元素的300px，发生换行显示。

IFC的对齐方式有时候可能比较难以理解，推荐文章：christopheraue.net/design/vert…

如何建立网格布局上下文（GFC）？

设置display:gird的元素将会生成网格容器，让布局从一维变成二维。

如何建立自适应格式上下文（FFC）？

设置display:flex的元素将会生成自适应容器，容器的每个子元素都是一个伸缩项目。在FFC中，对子元素设置vertical-align、float是无效的，容器元素同时设置column也是无效的。

文本相关属性

排版属性

经常使用的文本排版属性：

color、font-family、font-size、line-height、vertical-align、font-weight、font-style、text-transform、word-spacing、letter-spacing

文本排版的技巧：

设置文本宽度为：max-width: 36em; margin: 0 auto;
设置段首空格：p+p{text-indent: 1.25em}
设置文本对齐方式：text-align,left/right/center/justify/start/end
针对英文连字符：hyphens:auto
多列文本排列，columns指定列数
多行文本要设置break-word属性，避免单词或数字不换行超出！

单词不换行超出demo，设定了宽度怎么文字还超出了？

自定义字体

自定义字体在图标上应用至关普遍，经常使用的图标字体网站iconfont。

自定义字体的最佳兼容方案：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
复制代码

若是某天UI要求文本使用非默认字体，你可能须要有必定的心理准备。字体文件通常都至关的大，下载很是耗时，常见的解决方案：

借助JS实现平滑过渡：github.com/typekit/web…
使用字蛛，减少字体文件体积：font-spider.org/

文字阴影

使用text-shadow能够设置很是漂亮的阴影效果，经过逗号能够同时设置多道阴影，以下面demo：

更加牛逼的艺术字体，直接看别人的教程吧：practice.typekit.com/lesson/usin…

针对CSS没法实现的效果，可使用JS实现：

漂亮的盒子

background属性

background：#000、rgb(0,0,0)、rgba(0,0,0,0.5)、hsl()
background-image：背景图片
background-repeat: repeat、no-repeat、space、round，新增background-repeat-x
background-image：url(...)、linear-gradient(45deg, #cfdfee, #4164aa)，支持路径图片，支持base64图片、支持渐变
background-position：图片定位
background-clip，图片裁剪
background-origin，图片左上角对齐方式 -backgroung-attachment：local、scroll、fixed，背景图片在视口内固定或者随着区块滚动
background-size：contain、cover，背景图片尺寸
缩写： background: url(img/cat.jpg) 50% 50% / cover no-repeat padding-box content-box #bada55;

background使用技巧：

background-image和img有什么区别？如何选取？
background支持多图背景
渐变纹理图片，lea.verou.me/css3pattern…

border属性

border-radius，设置圆角
border-image边框背景（IE10不支持）
box-shadow，盒子阴影

border技巧：

各类css形状，如三角形、梯形等：tantek.com/CSS/Example…

经常使用布局方案

水平布局和垂直布局是最多见的需求，实现方案很是多，咱们一块儿探讨下

水平布局

举一个常见例子，如今须要实现用户样式，左侧是用户图片，右侧是用户姓名，要求垂直居中显示，现给定以下代码：

<div class="user">
  <img class="user-avatar" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567271267460&di=8e74e290191f83e701da4561dc99d2f7&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01acc45607d5826ac7251df87e05b8.jpg%401280w_1l_2o_100sh.png" width="50"/>
  <p class="user-name">xiaoming</p>
</div>
复制代码

float水平布局

.user{
  clear: both
}
.user-avatar{
  float: left
}
.user-name{
  float: left;
  margin-top: 12px;
}
复制代码

inline-block水平布局

.user{
}
.user-avatar{
  display: inline-block;
  vertical-align: middle;
}
.user-name{
  display: inline-block;
}
复制代码

table水平布局

.user{
  display: table;
}
.user-avatar{
  display: table-cell;
}
.user-name{
  display: table-cell;
  vertical-align: middle;
}
复制代码

flex水平布局

.user{
  display: flex;
  align-items: center;
}
复制代码

grid水平布局

.user{
  display: grid;
  grid-template-columns: 50px 50px;
}
复制代码

在上述方案中，inline-block布局须要注意元素之间的间隙，能够在父元素设置font-size:0进行消除。table布局很容易实现元素居中效果，以下面demo：

垂直布局

待补充案例

布局方案对比

浮动布局兼容性好，能够多行布局，具备自适应宽度特性，但须要清除浮动
inline-block布局，能够多行布局，具备自适应宽度特性，但元素间有间距bug
table布局兼容性好，能够垂直居中元素。
flex布局，IE10及以上可使用。
grid布局须要考虑兼容性

flex介绍

能够控制：元素尺寸（基于自身和有效剩余空间）；布局方向；对其方式，顺序
兼容至ie10，可是须要考虑私有属性（打包工具autoprefix自动补充前缀）
主轴和交叉轴。margin-auto的妙用
flex-basis/base-grow/base-shrink，basis定义空间从而计算剩余空间量，grow定义对于剩余空间的分配比例（剩余空间按比例分配）。而shrink定义缩小规则（计算缩小尺寸公式：((500 × 1) / ((800 × 1) + (500 × 1))) * 300 = 115.4 ）。
缩写形式：flex: 1 0 0%;， grow-shrink-basis
flex一样支持多行布局
flex有bug？github.com/philipwalto…
- 固定宽高比的元素如图像和视频，最好使用一个包裹元素。避免规范变化影响宽高比。
- flex-order就像z-index决定这层叠等级，还能够单独设置z-index（若是设定，order将失效）

grid介绍

待补充

栅格系统

经常使用于响应式设计，如知名库Bootstrap

先构思，避免陷入麻烦。模块化和组件化开发，布局页面？
总体布局思路：栅格布局？grid布局？
固定布局、流体布局、弹性布局：
- 固定布局：施加特定尺寸的布局，如定宽布局
- 弹性布局：ems中应用最多见？不理解
- 流体布局：布局元素设定百分比，大小比例（间距）保持不变？栅格系统 www.theguardian.com/internation…
建立栅格的2种方式：col-1of4： 25%；或者 row-quartet > * {25%}
页面总体布局和组件分离（布局和内容分离）
水槽宽度计算，能够设定百分比或者一个固定值。margin百分比相对于父元素宽度计算，em相对父元素字体计算
row容器使用margin：0 -1%，负边距消除容器子元素左右2个变速的边距。
使用padding计算排水沟，效果更简单。
225，使用inline-block和flex加强布局？
传统方法基本都是从左到右进行布局，如何进行2d维度布局，grid

表单样式

业务中使用表单很是多，咱们可能常常须要自定义表单控件，如radio/checkbox等等

经常使用表单表单样式清除代码：appearance: none; outline:none；border:none;

自定义checkbox

浏览器还没有提供自定义修改checkbox的属性，下面是配合label实现的demo：

input[type="checkbox"]{
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
}

input[type="checkbox"] + label{}
input[type="checkbox"]:checked + label{}
input[type="checkbox"]:focus + label{}
input[type="checkbox"]:focus:checked + label{}
复制代码

自定义radio实现原理同上，故在此不单独说明。

优秀的自定义checkbox案例：tympanus.net/Development…

自定义select

select样式很难修改，传统方案是使用div+span模拟实现，可是移动设备必须使用原生select标签！

若是想要自定义select，能够看看下面的两种实现：

select2：JS模拟实现
纯Css：尽可能抹平浏览器差别，www.filamentgroup.com/lab/select-…

Transform和动画

transform变化

transform支持2d和3d变化。transform会建立新的layer，配合css动画，性能卓越（but会消耗compose性能）

2d变化：translate、rotate、skew、scale、matrix
3d变化：transform3d、rotate3d
3d变化控制属性：perspective、perspective-origin、backface-visibility、transform-style
transform-origin控制变化中心点
transform会建立新的层叠上下文，会建立新的视口（position：fixed将以它做为新的参考）
建立transform动画，建议定义初始值，避免动态添加）
transform案例：transform-skew变化特效

transition动画

transition定义过分动画，即属性变化动画

transition: box-shadow .15s, transform .15s;
动画函数transition-timing-function： cubic-bezier.com
可动画属性：oli.jp/2010/css-an…
支持帧动画，此处推荐掘金小册：大厂 H5 开发实战手册

实现单向运动动画，不进行反向运动(反向运动时长为0或者无穷大)

在设置高度动画时，height必须设置Number。若是高度是动态的，则推荐使用max-height属性设置动画，下面为动态高度动画：

animation动画

animation定义帧动画，经过关键帧能够实现很是复杂的动画

animation-delay定义动画什么时候开始
animation-direction指示动画是否反向播放
animation-duration动画周期时长
animation-fill-mode设置CSS动画在执行以前和以后如何将样式应用于其目标：效果演示
animation-iteration-count定义动画循环次数
animation-play-state定义动画播放暂停
animation-timing-function定义动画的执行节奏

迪士尼动画十二法则

理解还不够深入，此处就不粘贴了。可是很是值得一看！

60fps（提升动画性能）

css动画性能，主要取决于重排重绘时间。
css动画的js只在开始时计算一次，运行时再也不有js计算
js动画使用requestAnimationFrame，而不要setTimeout
transfrom: translateZ(0);会建立新的Layer，避免重绘

重排重绘是性能的基础，能够在这个网站查询哪些属性会影响重排重绘，网站：csstriggers.com/

推荐阅读这篇文章，做者讲述的更加全面深入：H5动画60fps之路

响应式web设计

响应式设计并不只局限于改变布局，经过媒体查询能够至关精确地对页面进行重构，如：小屏幕扩大选择区，元素的显示隐藏，改变字体大小和行距等，从而提升阅读体验

响应式和分离式

分离式网站：pc和移动两套代码，提供差别化的体验，可是须要维护两套代码
响应式网站：pc和移动使用一套代码，省时省力，SEO好。可是使用两组js操做同一个dom很是麻烦，比较难以精确控制，因为增长了脚本和样式的代码量（可能影响性能）

响应式3要素

流动网格（弹性网格布局）：根据视窗的百分比设定容器的宽度，从而使容器在浏览器窗口大小变化时自动缩放
媒体查询：基于显示设备的物理特性来调用不一样的样式表，如尺寸、分辨率（@media all (max-width: 320x)）
响应图片：设置图像所占宽度至多为设备的最大宽度（max-width），同时针对分辨率选取最佳图片

视口概念

早期苹果为了手机可以显示pc页面，引入视口概念。视口影响着页面的显示效果，可使用viewport对视口进行控制，width=device-width设定布局视口等于理想视口。

布局视口（layout viewport）：iOS、安卓默认的布局视口为980px
可视视口（visual viewport）：物理屏幕的可视区域，可使用window.innerWidth获取【视觉视口】。
理想视口（idea viewport）：即屏幕的分辨率，iPhone5分辨率为320568，物理像素6401136
当前缩放值 = idea / visual，缩放的本质是对visual的操做，并不会影响布局视口形成重绘

若是设定以下：<meta name="viewport" content="width=device-width, initial-scale=1.0">，则可视视图为320

若是设定以下：<meta name="viewport" content="initial-scale=2.0">，则可视视图为160，出现横向滚动条，字体被放大2倍

响应式设计稿

媒体查询语法

@media all and (min-width:800px) and (orientation:landscape) {}
@media not (all and ())
// 逻辑操做符：and or not only（only主要兼容旧浏览器！最好带上！！！）
// width/height 视口宽高
// device-width 屏幕宽高
// orientation 横向竖向
// aspect-ratio 视口宽高比
// device-aspect-ratio 平补的宽高比
// color 每种颜色？
// resolution 打印机分辨率
// 视口：布局视口（页面原有大小）/可视视口（手机上的可视视口,即屏幕宽度）/理想视口（使用可视视口布局？），在手机端能够缩放网页/滑动位置；
// <meta name="viewport" content="device-width" />开启手机理想视口。手机的布局视口依赖网页设定？仍是手机本身设定？
复制代码

响应式图片

根据设备大小加载不一样尺寸的图片，经常使用的实现方式：

Js
srcset
picture
svg图片，矢量图形，随意缩放

响应式字体

根据设备大小，设置字体的尺寸，经常使用的实现方式

em相对父元素，rem相对根元素（html），vw相对视口单位，若不考虑兼容性则推荐使用font-size：5vw。

实战总结

图片设置max-width，避免超出

可维护的CSS

可维护的要求

DRY原则，Don't repeat yourself
尽可能减小改动时要编辑的地方！
当某些值依赖时，尽可能把相互关系表达出来，如line-height和font-size（使用inherit继承属性）

预处理框架

sass
less
stylus

后处理框架postcss

PostCSS 这个术语能够指代两件事：一是 PostCSS 核心工具，二是基于 PostCSS 建立的插件系统。PostCSS 核心工具并不能直接用于处理样式，只有配合它的插件，才能完成相关的编译工做。

插件Autoprefixer，自动补充浏览器私有前缀
借助其余插件，postcss能够拥有变量/混合/嵌套等等能力

文件命名规范

公共型样式：标签重置、通用布局、通用模块元件、功能样式、皮肤样式
特殊型样式：页面与网站总体差别较大的样式
皮肤样式：将颜色和背景抽离，非换肤类网页慎用

<link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>
复制代码

类命名规范

重置（reset）和默认（base）：消除默认样式和浏览器差别，并设置部分标签的初始样式，以减小后面的重复劳动

1. Eric Meyer’s “Reset CSS” 2.0
    2. Normalize.css
复制代码

布局（grid）：将页面分割为几个大块，一般有头部、主体、主栏、侧栏、尾部等
模块（module）：一般是一个语义化的能够重复使用的较大的总体！好比导航、登陆、注册、各类列表、评论、搜索等
元件（unit）：一般是一个不可再分的较为小巧的个体，一般被重复用于各类模块中！好比按钮、输入框、loading、图标等
功能（function）：为方便一些经常使用样式的使用，咱们将这些使用率较高的样式剥离出来，按需使用，好比清除浮动等
皮肤（skin）：若是你须要把皮肤型的样式抽离出来，一般为文字色、背景色（图）、边框色等

补充说明：

不要用布局去控制模块或元件，模块和元件应与布局分离独立；
不要经过模块或其余类来重定义或修改已经定义好的功能类选择器和皮肤类选择器
当模块或元件互相嵌套，应该慎用标签选择器，避免样式冲突

样式编写规范

根据属性的重要性按顺序书写，先写定位布局属性，后写盒模型等自身属性，最后是文本类及修饰类属性
- 显示属性： display、visibility、position、float、clear、top
- 自身属性：width、height、margin、padding、border、overflow、min-width
- 文本属性和修饰属性：font、text-align、text-decoration、vertical-align、white-space、color、background
若是属性间存在关联性，则不要隔开写，如:

height: 18px;
    line-height: 18px;
复制代码

先私有后标准，便于样式降级~

BEM介绍

BEM的命名规则： 块名__元素--修饰符

BEM的抽象理解：

BEM的优点：

使用惟一类名，避免形成样式冲突
避免了位置依赖（不要使用以下形式定义属性：.sidebar conent-title__reversed）
避免了深层嵌套bug，如使用h2选择器，深层h2标签将深受其害~~~（如定义h2{color: white !important;}，则上面的demo最终显示什么？）

BEM定义类名的原则：

单一原则：建立的类名必须有单一的、高度聚焦的理由。你应用到某个选择器里的样式应该是为了单一目的而建立的，而且可以很好地实现这个目标
单同样式来源：若是组件受父类名限制，则应该将限制写在该父组件的样式文件中
分离容器和内容：要求页面元素不依赖于其所处位置，在任何地方使用具备一致性
分离结构和主题：将视觉样式效果单独提取出来，拆分主题便于复用
区分布局与组件角色和职责，以下面demo，rol、col关注布局，media-block关注组件样式：

BEM是一个优秀的模块化方案，可是可能存在一些问题：

大量重复css代码，如偏移：list-marginTop30 form-marginTop30
业务紧迫致使技术债，致使css的修改偏离了bem方案，常常重写或者复制粘贴。

所以没必要拘泥于BEM方案，技术最终服务于产品。

向函数式css演进

若是你正在开发企业后台，对于样式没要求很是精准，推荐使用函数式css方案，它可以有效的减小css代码重复量！

函数式CSS开源库有不少，笔者在业务中基于tachyons进行了修改，打造本身的函数式css库，如定义width的几种方式：

/*
针对宽度，定制经常使用的css类名
.w-120 width: 120px
.w20 width: 20%
.w--auto width: auto
*/

.w-80{width: 80px;}
.w20{ width: 20%; }
.w--auto{ width: auto; }
.w--third { width: 33.333333%; }
复制代码

css技巧

table-layout布局

table-layout属性定义了用于布局表格单元格、行和列的算法。

auto，表格和单元格的宽度取决于其包含的内容，大多数浏览器默认值
fixed，表格和列的宽度经过具体width设定，可使用overflow属性控制是否容许内容溢出

table{
    table-layout: fixed;
}
复制代码

tableLayot-fixed：超出显示省略号DEMO

css伪随机

蝉原则，使用质数做为循环周期来增长“天然随机性”的策略（模拟天然的随机效果）。如质数五、7的最小公倍数为35。

// 随机背景条纹
.stripes {
  background-color: #026873;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
}
// 随机圆角效果，最小公倍数-质数相乘2310
.list:nth-child(2n + 1) {}
.list:nth-child(3n + 2) {}
.list:nth-child(5n + 3) {}
.list:nth-child(7n + 4) {}
.list:nth-child(11n + 5) {}
// 随机动画效果
animation: 1s spin, .7s radius, 1.1s color, 1.3s width;
复制代码

随机背景条纹效果图：

蝉原则案例：随机颜色方块DEMO

padding百分比的应用

若是业务要求开发web播放器，必须保证播放器按等比例进行缩放，如何实现？

利用pading百分比技术便可轻松实现。

引用：

CSS图书：《css master》《前端架构师》《CSS秘密花园》
张鑫旭Blog：www.zhangxinxu.com/wordpress/
网易NEC规范
高质量css指南： cssguidelin.es/#dry

文章推荐

学习Vue源码系列：【Ts重构Vue】00-Ts重构Vue前言