CSS

变量

* {
  --themeColor: red;
  --fontSize: 28rpx;
}

div {
  font-size: var(--fontSize);
  color: var(--themeColor);
}

---

css 书写规范

https://blog.csdn.net/sunfrw/article/details/83176259
一.属性规范
1.属性书写顺序

（1）位置属性(position, top, right, z-index, display, float等)；

（2）大小(width, height, padding, margin)；

（3）文字系列(font, line-height, letter-spacing, color- text-align等)；

（4）背景(background, border等)；

（5）其他(animation, transition等)。

总结：建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性。

/推荐顺序/

.example {

           position: absolute;

           width: 100px;

           font-size: 20px;

           background-color: #ccc;

}

/不推荐顺序/

.example {

           width: 100px;

           background-color: #ccc;

           position: absolute;

           font-size: 20px;

}

2.属性用法规范

（1）缩进：建议使用4个空格做为一个缩进层级。

（2）非特殊场景尽量少使用!important，如果使用须添加必要的注释。

（3）属性定义必须另起一行，且属性定义后以分号结尾。

（4）选择器与"{“之间必须包含空格；属性名与之后的”:“之间不允许包含空格；”:"与属性值之间必须包含空格。

（5）尽量少使用将样式的定义写在标签中（如内联样式：style=“color:red;”），也不要用js为元素添加内联样式。

3.属性简写

属性可以简写时，强制采用简写方式，可以精简代码且提高阅读体验。

（1）如padding,margin,font,color等等

 /*推荐写法*/

.example {

         padding: 5px 10px;

 }

 /*不推荐写法*/

 .example {

           padding-top: 5px;

           padding-bottom: 5px;

           padding-left: 10px;

           padding-right: 10px;

   }

（2）小数点前面的’0’建议去除

/*推荐写法*/

.example {

     font-size: .8rem;

 }

/*不推荐写法*/

.example {

     font-size: 0.8rem;

}

（3）使用十六进制表示颜色值

    css 中的颜色值可以使用十六进制来表示，在可能的情况下，可以进行缩写，比如：#abf,#ccc。

4.嵌套规则：

（1）嵌套层级不超过四个层级。

（2） 在scss,less中可以嵌套选择器，可以提升代码的简洁性和可读性，但是应该尽量避免使用没有任何内容的选择器。

应遵循scss/less嵌套顺序：

a.当前选择器的@extend和@include

b.当前选择器的样式属性

c.父级选择器的伪类选择器（:first-child,:active等）

d.伪类元素（:before,:after）

e.父级选择器的声明样式

f.用 scss 的上下文媒体查询

g.子选择器

二.命名规范
1.文件名称命名

不得包含汉字空格和特殊字符，全部采用小写方式，多个单词组成时，以中划线分割。

2.样式命名

采用相应样式效果、功能描述的单词或缩写，不得包含汉字空格和特殊字符。

（1）id命名：驼峰式命名法。建议尽量避免使用id作为样式控制。

（2）class命名：小写英文&数字&-（中划线）来组合命名。

（3）常规命名：命名中除众所周知的缩写外，尽量不采用缩写。

网页外层重要部分CSS样式命名：

外套： wrap

头部： header

主要内容： main

左侧： main-left

右侧： main-right

导航条： nav

内容 ：content

底部： footer

常用的CSS命名规则

侧栏：sidebar

栏目：column

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签：tags

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guide

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

3.其他

（1）使用的类名应区别于用于js操作或其它用途的类名。

（2）建议每行不得超过120个字符，除非单行不可分割。

三.注释规范
1.统一采用 /**/，具体参照下方的写法。

2.缩进与下一行的代码保持一致；可位于一个代码行的末尾，与代码间隔一个空格。

3.css文件必须书写顶部注释，标明该文件隶属模块。

4. 一个规则中有多条声明时，每条声明应独占一行；只有一条声明，整个规则可以写为一行。

四.使用规范
引用规范：不要使用@import，在使用less时除外，less使用@import，需避免在css中生成@import代码

五.图片
1.使用PNG格式时，使用场景为单色背景、图中主要颜色不超过3种的，应采用PNG-8编码保存。其它场合下，采用PNG-24保存。

2.推荐单个图片体积在10kb以下时，应考虑在css中以base64编码内联提供，不单独提供图片文件。

---

水平垂直居中

1. 通过 CSS
   calc() 函数

   .box {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
   }
   

   .box {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   

   .box {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -50%;
     margin-left: -50%;
   }
   

   .box {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

2. 通过 JS

last-child

规则
el:last-child 的匹配规则是：

1. 查找 el 选择器匹配元素的所有同级元素 siblings
2. 在同级元素中查找最后一个元素
3. 检验最后一个元素是否与选择器 el 匹配。如果匹配生效，如果不匹配则没有作用

<style>
.child:last-child {
  background: red;
}
</style>

html:
div.box
	div.child
	div.child
	div.child
	div.child
	div.btn

.child:last-child 匹配到了 .btn，但 .btn 不匹配 .child，故选择器不生效

1. 可改成 .child:nth-last-child {}
2. 把所有.list标签用div包起来，保证最后一个子元素为.list

---

:nth-last-of-type

<style>
.child:nth-last-of-type(1) {
  background: red;
]
</style>

html
.father
	p.child
	p.child
	p.child
	p.btn

这里不会起作用
首先选择器不管你写的是.class:nth-还是 div:nth- 他都会去找选择元素的 标签类型，如果统计元素中有相同的元素，虽然类名不通，跟我们写的选择器都挂不上边，但是还是会判断掉最后一个元素的 class 匹配不上选择器

下边这样的生效

<style>
.child:nth-last-of-type(1) {
  background: red;
]
</style>

html
.father
	p.child
	p.child
	p.child
	div.btn

ps: 扯蛋选择器，看不懂