奇舞团前端工程化
2017-03-22 12:03:11 0 举报AI智能生成
奇舞团CSS前端工程化视频学习笔记
作者其他创作
大纲/内容
命名原则
基于功能
它是用来干什么的
.button/.form/.list/.tab-list/.nav
优先使用
样式与内容无关
基于内容
元素里面放的是什么
.news/.user-info/.help/.contact-me
中小型网站可以给予内容去命名
基于视觉
看起来是什么样？
.round-image/.nowrap
大型网站可以基于视觉去命名
不要使用太具体的样式
现在比流行的命名方式
BEM
Block
.block
Element
.block__element
Modifier
.block__element--modifer
eg. tab__item--active
目的
提供一致、合理的开发基础
应对变化
提升效率
文件结构
css
basic
css reset
设置HTML标签的默认样式
使其在各个浏览器表现基本一致
让默认样式归零
normalize.css
设置HTML标签的默认样式
使其在各个浏览器表现基本一致
保留标签的默认样式
moudles
可复用的css代码段
与模块在HTML中的位置无关
（一般）与使用的HTML标签无关
抽取css模块原则
面向对象
结构和皮肤分离
.btn .btn--primary .btn--info .btn--danger
容器和内容分离
/* 不推荐这样写 */
.header .btn {
background: #f66;
color: #fff;
}
这样就没有遵循与位置无关原则
单一职责
尽可能细的拆分成可独立复用的组件
通过组合方式使用多个组件
比如将布局和其它样式拆分
开闭原则
对扩展开放
对修改关闭
DRY
pages
0 条评论
下一页
