CSS书写规范
CSS书写规范
https://www.aliyun.com/jiaocheng/636928.html
1. CSS书写顺序
1.1 位置属性(position,top,right,z-index,display,float 等)
1.2 大小(width,height,padding,margin)
1.3 文字系列(font,line-height,letter-spacing,color,text-align等)
1.4 背景(background,border等)
1.5 其他(animation,transition 等)
示例:
样式里边:先写位置,大小,文字系列,背景…
注意对齐,相差一个tab键的距离。习惯上冒号后边会空一个空格符。
.example{ z-index: -1; display: inline-block; font-size: 1.5 em; color: red; background-color: #9e0;}
2. CSS 书写规范
2.1 使用CSS缩写属性
2.1.1 CSS 有些属性是可以缩写,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读
.list-box{ .list-box{ border-top-style: none; border-top: 0; font-family: serif; font: 100%/1.6 serif; font-size: 100%; 简写: padding: 0 1em 2em; line-height: 1.6; } padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;}
2.1.2 去掉小数点的“0”
比如: font-size: 0.8em; 简写: font-size: .8em;
2.1.3 简写命名
很多用户都喜欢简写类名,但前提是要人看懂你的命名才能简写。
例子:
.navigation{} .atr{} 正确简写: #nav{} .author{}
2.1.4 颜色代码缩写
color: #eebbcc; 可以写成: color: #ebc;
2.2. 连字符CSS选择器命名规范
长名称或词组可以使用中横线来为选择器命名。不建议使用 “_” 下划线来命名CSS 选择器,原因:浏览器有兼容性问题,IE6 里面 _tip 的选择器命名是无效的。同时也可以区分开js里面的标量命名。
2.3 不要随意使用id
id在JS是唯一的,不能多吃使用,class类选择器可以重复使用。另外id的优先级优先于class,所以id应该按需使用。建议:在分模块布局的时候使用id。
2.4.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀,让语义更明了。
例子:
.withdrawal{ .is-withdrawal{ bacckground-color: #ccc; background-color: #ccc;} }
3、CSS 常用的命名
头: header
内容:content/container
尾:footer
导航:nav
侧栏: sidebar
栏目:column
页面外围控制整体宽度:wrapper
左右中: left right left
登录条:loginbar
标志: logo
广告: banner
页面主体: main
热点:hot
新闻:news
下载:download
子导航:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
标签;tags
文章列表:list
提示信息:msg
栏目标题:title
加入:joinus
指南:guide
服务:server 注
册:register
状态:status
投票:vote
合作伙伴:partner
3.1 id的命名:
3.1.1 页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
3.1.2 导航
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
3.1.3 功能
标志: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
3.1.4、id 命名注意事项
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写,除非一看就明白的单词。
4、CSS样式表文件命名
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
css样式的书写顺序及原理 https://blog.csdn.net/qq_36060786/article/details/79311244
（1）定位属性：position display float left top right bottom overflow clear z-index
（2）自身属性：width height padding border margin background
（3）文字样式：font-family font-size font-style font-weight font-varient color
（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
（5）css3中新增属性：content box-shadow border-radius transform……
按照上述1 2 3 4 5的顺序进行书写。
目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能
原理：浏览器的渲染流程为——
①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
②构建render树：DOM树和CSS树合并之后形成的render树。
③布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在②③④步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染正如按照这样的书写书序：
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。
所以规范的的css书写顺序对于文档渲染来说一定是事半功倍的！
扩展：还有一个会影响浏览器渲染性能的词汇“repaint（重绘）”
repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
注意：
a.render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。
b.有些情况，比如修改了元素的样式，浏览器并不会理科reflow或repaint，而是把这些操作积攒一批，然后做一次reflow，这也叫做异步reflow.但在有些情况下，比如改变窗口，改变页面默认的字体等，对于这些情况，浏览器会马上进行reflow.
c.为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
