前言

近几年来，国内外优秀的ui库层出不穷，开发页面的时间也相对减少，更多是用ui组件库进行排列组合出来，相比较以前的工作业务逻辑及接口对接占了主要的内容，所以这篇文章主要是带大家总结一些css上的技巧，让大家回归初心，想起第一次学习前端时候的感觉

CSS选择器

1.常用选择器

选择器	用法
id选择器	#myid
类选择器	.myclassname
标签选择器	div,h1,p
相邻选择器	h1+p
子选择器	ul > li
后代选择器	li a
通配符选择器	*
属性选择器	a[rel="external"]
伪类选择器	a:hover, li:nth-child,:not()

2.常用技巧

2.1 使用not来实现边距

在开发界面过程中，我们经常会遇到下图这种列表的样式：

/* 添加边距 */
.list .item {
  margin-right:12px
}

为最后一个元素去除边框

/* 去掉边距 */
.list .item:last-child {
  margin-right:0px
}

但也可以使用 :not() 伪类来达到同样的效果：

.list .item:not(:last-child) {
  margin-right:12px
}

当然，你也可以使用 .list .item + .item ，但是 :not() 更加清晰，具有可读性。

2.2 使用负的 `nth-child` 来选择元素

li {
  display: none;
}


/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
  display: block;
}

命名规则

1.BEM

BEM是Block（块）、Element（元素）、Modifier（修饰符）的简写，是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。使用BEM主要是为了将用户界面划分成独立的块，使开发更为简单和快速，有利于团队协作，方便维护。

1.1 Block

Block需要你明确的指出所描述的组件，例如：search，select。而不是left、right、red

1.2 Element

Element需要你指出组件下的内容，例如：search__text,search__btn

1.3.Modifier

Modifier主要是对内容的修饰，例如：search__text--red

2.举个例子

如上图所示，在看到高保真以后，我这边就会把组件块状分解出来，然后再去分解里面内容，添加对应的修饰内容，例如加个高亮，颜色什么的。在组件分解的时候我这边习惯用Hd,Bd,Ft（head,body,foot简写），基本可以涵盖大部分组件分解的需求，也比较清晰的。

布局

1.flex布局

flex 是"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

采用 flex 布局的元素，称为 flex 容器（flex container），它的所有子元素自动成为容器成员，称为 flex 项目（flex item）。 flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列等。

2.grid布局

Grid布局及网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

3.总结

在一些比较简单布局情况使用flex布局非常的舒服，但在某些情况它就不是很好用，如下图，这种情况使用grid布局会更加方便,所以Grid 可以做Flexbox做不了的事，但Flexbox 比 Grid 兼容性更好

层叠与继承

1.继承

后代的标签可以继承祖先标签的部分属性，css可以继承的属性：以font,color,text,line开头的通常99%都可以继承。在DevTool Elements Styles面板中可以查看继承情况

2.层叠

层叠就是比较三个因素，决出优先级更高的声明。三个因素是

样式来源
选择器的优先级
源码顺序

示例：超链接存在 :link（有链接），:visited（已访问），:hover（悬停），:active（点击） 四个状态。

四个状态有可能叠加存在，比如点击时既是 active 又是hover，如果href有值还满足link，但点击时需要 active 状态优先。按照交互逻辑，需要写出优先级 active > hover > visited > link 的效果。

四种选择器的优先级一样，所以通过源码顺序来调整。

媒体查询

1.使用方法

1.1 使用外部样式表，link标签引css文件

<link rel="stylesheet" media="(max-width: 800px)" href="./css/body_bgc.css">

1.2 使用内部样式表，style内部写css代码

@media screen and (max-width:1000px) {
  div{
     background: green;
  }
}

2.媒体查询的概念

2.1 媒体类型

使用媒体查询时，你必须指定要使用的媒体类型。
媒体类型是可选的，并且会（隐式地）应用 all 类型。

常见的媒体类型值如下：

1、all：适用于所有设备

2、print：适用于在打印预览模式下在屏幕上查看的分页材料和文档

3、screen（掌握）：主要用于屏幕

4、speech：主要用于语音合成器

CSS预处理器

Sass：Sass 是一种成熟且流行的 CSS 预处理器。它支持变量、嵌套语法、混合器等功能，并且提供了方便的命令行工具和集成开发环境。其缺点是需要编写额外的代码，学习曲线也较陡峭。
Less：Less 提供了类似 Sass 的功能，同时也提供了更好的浏览器兼容性。Less 编译器可以很方便地用 JavaScript 实现，因此它通常被作为前端构建工具中的一部分来使用。
Stylus：Stylus 还比 Sass 和 Less 更加灵活，因为它支持自由使用不需要花括号（{}）的 CSS。Stylus 的缺点与 Sass 类似，需要编写额外的代码，并且其语法可能对于新手而言比较晦涩。

CSS 预处理器的优点包括提高了 CSS 开发的效率，例如使用变量、混合器和函数等功能来简化代码。同时也能够提高代码的可重用性和可维护性，并且代码的层次结构更易于理解。其缺点包括需要额外的学习成本和引入了额外的构建步骤，可能会导致编译时间增加及开销的增加。

CSS优化

减少选择器的复杂性：尽量避免使用层叠较深的选择器，选择器的复杂性会影响渲染速度。
避免使用通配符选择器：尽可能地避免使用 * 通配符选择器，因为它会使查找规则更加耗时。
使用缩写属性：在编写 CSS 样式时可以使用缩写属性，这样可以减少代码的长度，并且也有利于代码的可读性。
去除重复的样式：尽量避免使用重复的样式，如果一个样式在多个元素中使用了，可以考虑将它们合并到同一个类中。
压缩 CSS：在发布前可以使用工具将 CSS 压缩，这样可以减少文件大小，进而减少网络传输时间。
将 CSS 放在头部：将 CSS 放在 HTML 文档的头部，这样浏览器可以先下载 CSS 文件并进行解析和渲染，非必需的 CSS 文件放在文档尾部，从而提高页面的加载速度。
避免使用 @import：在 CSS 文件中避免使用 @import，因为它会导致浏览器需要等待所有外部文件下载完成之后才能开始渲染页面。
使用媒体查询：使用媒体查询可以让页面能够适应不同的设备尺寸，并且还能避免不必要的样式加载和渲染。

CSS新功能

1.容器查询

codesandbox.io/s/container…

2.逻辑属性

codepen.io/cssgrid/pen…

css-tricks.com/css-logical…

物理属性：

逻辑属性：

3.css变量

:root{

--color: red;

}

.colora{

color: var(--color)

}

4.clamp()

clamp() 函数接收三个用逗号分隔的[表达式]作为参数，按最小值、首选值、最大值的顺序排列

.width: clamp(200px, 50%, 500px);。

你不知道的css

前言