CSS 书写顺序
- 位置属性（
position，top，right，z-index，display，float等） - 大小（
width，height，padding，margin） - 文字系列（
font，line-height，letter-spacing，color-text-align等） - 背景（
background，border等） - 文本属性 （
text-align，vertical-align，text-wrap等） - 其他（
animation，transition等）
目的：减少浏览器 reflow 回流，提升浏览器渲染 dom 的性能
例如以下代码
.test{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到回流的影响而重新定位
CSS 缩写属性
CSS 有些属性是可以缩写的，比如 padding ，margin ，font 等等，这样精简代码同时又能提高用户的阅读体验
去掉小数点前的 “0”
很多同学都喜欢简写类名，但前提是要让人看懂你的命名才能进行简写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主
连字符
长名称或词组可以使用中横线来为选择器命名
不建议使用 “_” 下划线来命名 CSS 选择器，为什么呢？
- 输入的时候少按一个
shift键 - 浏览器兼容问题（比如使用
_tips的选择器命名，在IE6是无效的） - 能良好区分
JavaScript变量命名（JS变量命名是用 “_” ）
不要随意使用 Id
id 在 JS 是唯一的，不能多次使用，而使用 class类选择器却可以重复使用，另外 id 的优先级优先与 class ，所以 id 应该按需使用，而不能滥用
CSS 常用样式命名
页面结构
- 容器:
container - 页头：
header - 内容：
content/container - 页面主体：
main - 页尾：
footer - 导航：
nav - 侧栏：
sidebar - 栏目：
column - 页面外围控制整体佈局宽度：
wrapper - 左右中：
left right center
导航
- 导航：
nav - 主导航：
mainnav - 子导航：
subnav - 顶导航：
topnav - 边导航：
sidebar - 左导航：
leftsidebar - 右导航：
rightsidebar - 菜单：
menu - 子菜单：
submenu - 标题:
title - 摘要:
summary
功能
- 标志：
logo - 广告：
banner - 登陆：
login - 登录条：
loginbar - 注册：
register - 搜索：
search - 功能区：
shop - 标题：
title - 加入：
joinus - 状态：
status - 按钮：
btn - 滚动：
scroll - 标籤页：
tab - 文章列表：
list - 提示信息：
msg - 当前的:
current - 小技巧：
tips - 图标:
icon - 注释：
note - 指南：
guild - 服务：
service - 热点：
hot - 新闻：
news - 下载：
download - 投票：
vote - 合作伙伴：
partner - 友情链接：
link - 版权：
copyright
注意事项：
- 一律小写
- 尽量用英文
- 不加中槓和下划线
- 尽量不缩写，除非一看就明白的单词
BEM 命名规范
Bem 是块（block）、元素（element）、修饰符（modifier）的简写，利用不同的区块，功能以及样式来给元素命名
解决问题
- 光凭
class名字就可以让其他开发者知道某个标记用来做什么的，明白各个模块之间的关系 - 组件之间的完全解耦，不会造成命名空间的污染
语法
-
-中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号
-
__ 双下划线：双下划线用来连接块和块的子元素
-
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态
用法
.block {}
.block__element {}
.block_modifier {}
.type-block__element_modifier {}
block代表了更高级别的抽象或组件block__element代表.block的后代，用于形成一个完整的.block的整体block_modifier代表.block的不同状态或不同版本
使用
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
