前端-css书写规范

最新推荐文章于 2023-06-05 20:00:00 发布

12345sdfad

最新推荐文章于 2023-06-05 20:00:00 发布

阅读量152

点赞数

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/clyss1234/article/details/120264283

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

CSS书写顺序

定位属性（position，display，float，left，top，right，bottom，overflow，clear，z-index）
自身属性（width，height，padding，border，margin，background）
文字系列（font-family，font-size，font-style，font-weight，font-varient，color）
文本属性（text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow）
背景（background）
其他（animation，transition，box-shadow，transform）

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

原理：

浏览器的渲染流程为——

①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构

②构建render树：DOM树和CSS树合并之后形成的render树。

③布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。

④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

css样式解析到显示至浏览器屏幕上就发生在②③④步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染

举例：

/** 
当浏览器解析到position的时候发现该元素是绝对定位元素需要脱离文档流,
而之前却是按照普通元素进行解析的，
所以不得不重新渲染，解除该元素在文档中所占位置，
然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。
最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。
**/
width: 100px;
height: 100px;
background-color: red ;
position: absolute;

注意：

render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。
有些情况，比如修改了元素的样式，浏览器并不会立刻reflow或repaint，而是把这些操作积攒一批，然后做一次reflow，这也叫做异步reflow。但在有些情况下，比如改变窗口，改变页面默认的字体等，对于这些情况，浏览器会马上进行reflow.
为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

+++

CSS语法

css类命令一般为小写英文字母，多个单词用连词符（-）连接，不建议使用（_）来命名选择器
命名可以使用单词缩写，但必须确保是有效的缩写
命名规则须以内容优先，表现为辅。
主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名，其他的都使用 class 属性命名。
所有的声明语句应当以分号结尾
去掉可以省略的，如小数点前面的0，16进制颜色代码
十六进制值应该全部小写，如#fff
避免为0值指定单位，如margin: 0px应写成margin: 0
更清晰的注释： /* Header */内容/* End Header*/

+++

常用CSS选择器名字

头部：header	
内容：content/container	
尾：footer	
导航：nav	
侧栏：sidebar
栏目：column	
页面布局宽度：wapper	
左右中：right，left，center	
登录条：loginbar
标记：logo	广告：banner		
页面主题：main	
自导航：subnav	
菜单：menu
子菜单：submenu	
页脚：footer		
版权：copyright	
标签：tags	
文章列表：list
栏目标题：title

+++

##面向对象CSS（OOCSS）

将可复用的CSS代码抽取出，单独形成一个CSS类，形成组件CSS中，类似于面向对象的继承。