＜恢复更新进度ing：今天浅聊一下前端CSS样式 及 书写的规范 ＞

---

👉 前言

时隔两个星期，小温终于是忙的差不多了。从今天开始恢复更新，今天打算和大家聊聊CSS样式的一些书写规范 以及 一些日常使用频率较高的技巧。卷王们，继续冲冲冲！

👉 一、基本概念

首先，我们需要了解什么叫做CSS样式，众所周知，CSS样式，也被称为： 层叠样式表。在百度中，是这样描述它的：

层叠样式表(英文全称：Cascading Style Sheets) 是一种用来表现HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS 作为一门样式语言，语法简单，易于上手，但是由于不具备常规编程语言提供的变量、函数、继承等机制，因此很容易写出大量没有逻辑、难以复用和扩展的代码，在日常开发使用中，如果没有完善的编码规范，编写的 CSS 代码会非常冗余且难以维护，容易演变成 祖传代码，不仅不利于后期对样式修改和维护，而且代码内容极多。

为了解决上述问题，出现了很多 CSS 预编译语言，CSS 预编译语言是基于 CSS 语言的语法扩展，除了能解决上述缺乏语言特性带来的问题之外，还支持嵌套书写，减少重复输入父级选择器（可理解为 CSS 中的继承机制），提高了代码的可读性和编写效率，常见的预编译语言有 Less、Sass 等。

接下来，在 CSS 预编译语言 约束下，讲解下需要注意的一些规范 及 技巧！

👉 二、书写注意事项

编写具有层级样式的CSS样式时，需要注意以下几点：

① 样式命名规范 且 可以见名知意，可采用： 驼峰命名法 [ 大/小驼峰命名法: cssName（小） 、CssName（大） ]、下划线命名法 [ css_name ]

② 层叠样式合理划分父子级样式内容，要准确知道父级样式对子级样式的影响 （ 即 父子样式继承关系 ），避免样式污染。

在这拓展一个知识点，样式命名重复也有可能产生样式污染，所以需要合理命名 且 使其处于独立的作用域

③ 合理使用样式选择器，使代码更加简洁明了，样式选择器有以下几种：

• ID选择器 （ <div id="xxID">...</div>）
• 类选择器 （<div class="XXClass">...</div>）
• 标签选择器 （ XX标签名 { 样式内容 } ）
• 层级选择器 （ tips： 层级选择器不建议嵌套太深，影响性能 ）

/* 层级选择div内 的所有span，在这里选择的可以是ID、class、标签 */
div span {}

/* 选择content类中的 title类 */
.content .title {}

• 组选择器

/* 多个选择器,如果有同样的样式设置,可以使用组选择器。
( 组选择器之间用逗号分隔;层级选择器之间用空格分隔 ) */
.btn_1, .btn_2, .btn_3, #id {}

• 伪类 / 伪元素选择器

常用的伪类选择器有 hover, 表示鼠标悬浮在元素上时的状态.
伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容。
此处不做具体讲解，下面展示伪类和伪元素选择器在Scss预编译语言中的使用

/* 如果是使用内嵌的方式，就需要 &符号来引用伪类和伪元素 */
div {
	&:first-child {} /* 选择第一个div */
	
	&:last-child {} /* 选择最后一个div */
	
	&:hover {} /* 选择鼠标悬浮后的样式 */

	/* 伪类选择器需要&:: 来引用 */
	&::after {}
	&::before {}
}

④ 善用深度选择器，用于穿透scoped属性限制作用域的情况下，更深层次的去覆盖 或者 重写某个深层嵌套的样式属性。

/* 书写方式 */
/deep/ {
	cssName {} /* 仅在预编译语言中可用 */
}
/deep/ cssName {}

>>> {
	cssName {}
}
>>> cssName{}

::v-deep {
	cssName {}
}
::v-deep cssName {}

👉 三、常用小技巧

• 使用 flex布局对项目进行排布，代替以往的position 以及 float 。flex布局语法 及 flex布局案例 可查阅先前转载自 “ 阮一峰 ” 大佬的flex布局文章。

• 使用以下代码，可实现文本超出自动省略。

div {
	width: 70%; /* 设置指定宽度，当内容超出指定宽度，对应内容将被省略，可配合title 或者 element中的文本提示组件 展示全部内容 */
	max-width: 700px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

• 使某个元素依据父级元素定位

div {
	position: relative;
	.children {
		position: absolute;
		top: 50% | 50px | 50vh...;
		bottom: ...;
		left: ...;
		right: ...;
	}
}

• 合理使用计量单位，能够使界面更加符合心意，也可以更加响应式。具体CSS计量单位可点击查看先前发布的文章： 点击跳转

💬 小温有话说

内容大致更新至此，后续还会慢慢补全一些实用的小技巧。现在暂时想不起那些实用的小技巧了，感觉都挺常见的，还有由于太久没更新内容，内容是加赶出来的，稍微有点粗糙，望卷王们见谅！

---

参考文献

• 腾讯云 - CSS 预编译语言 Sass 快速入门教程

• W3CSchool - CSS选择器

往期内容 💨

🔥 ＜ 了解 HTTP 这一篇就够了 ：什么是 HTTP ？HTTP 和 HTTPS 有什么区别 ？ ＞

🔥 ＜ 每日小技巧：Vue常用修饰符 ＞

🔥 ＜Javascript技巧： Javascript 是个难泡的妞，学点技巧征服 “ 她 ” ＞

🔥 ＜ 谈谈对 SPA（单页面应用）的理解 ＞