冠军资讯
加班到秃头在前端开发中，CSS 复习往往容易被忽视，但它却是构建高性能、可维护 Web 应用的关键环节。很多开发者在项目初期，仅仅为了实现视觉效果而堆砌 CSS 代码，导致后期维护成本飙升，页面加载速度变慢。本文将结合我 10 年的后端架构经验，从性能优化、代码组织、以及常见问题避坑等方面，带你深入复习 CSS 的知识点。
CSS 基础知识回顾
选择器
CSS 选择器是 CSS 规则的核心。常见的选择器包括：
- 元素选择器 (Element Selectors):
p { ... }- 选择所有<p>元素。 - 类选择器 (Class Selectors):
.my-class { ... }- 选择所有 class 属性包含 "my-class" 的元素。 - ID 选择器 (ID Selectors):
#my-id { ... }- 选择 id 属性为 "my-id" 的元素（ID 在单个页面中应是唯一的）。 - 属性选择器 (Attribute Selectors):
input[type="text"] { ... }- 选择所有 type 属性为 "text" 的<input>元素。 - 伪类选择器 (Pseudo-classes):
a:hover { ... }- 选择鼠标悬停在链接上的状态。 - 伪元素选择器 (Pseudo-elements):
p::first-letter { ... }- 选择段落的第一个字母。 - 组合选择器 (Combinators):
- 后代选择器:
div p { ... }- 选择<div>元素内的所有<p>元素。 - 子选择器:
div > p { ... }- 选择<div>元素的直接子元素<p>。 - 相邻兄弟选择器:
h1 + p { ... }- 选择紧跟在<h1>元素后的<p>元素。 - 通用兄弟选择器:
h1 ~ p { ... }- 选择<h1>元素后的所有<p>元素。
- 后代选择器:
理解不同选择器的优先级和性能影响非常重要。例如，ID 选择器通常比类选择器具有更高的优先级，但过度使用 ID 选择器可能会降低 CSS 的可维护性。
盒模型
盒模型是 CSS 布局的基础。每个 HTML 元素都可以看作一个盒子，由 content、padding、border 和 margin 组成。
- Content (内容): 盒子的实际内容，例如文本、图像等。
- Padding (内边距): 内容与边框之间的空间。
- Border (边框): 盒子的边框。
- Margin (外边距): 盒子与其他元素之间的空间。
box-sizing 属性控制盒模型的计算方式。默认情况下，box-sizing 的值为 content-box，这意味着元素的宽度和高度仅包含内容区域。如果将 box-sizing 设置为 border-box，则元素的宽度和高度将包含内容、内边距和边框。
/* 设置所有元素的盒模型为 border-box，方便计算 */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
布局方式
CSS 提供了多种布局方式，包括：
- 正常流 (Normal Flow): 元素按照其在 HTML 中的顺序依次排列。块级元素占据整行，行内元素在同一行内排列。
- 浮动布局 (Float Layout): 通过
float属性使元素脱离正常流，向左或向右浮动。浮动布局常用于创建多列布局。 - 定位布局 (Position Layout): 通过
position属性控制元素的位置。position属性有四个可能的值：static、relative、absolute和fixed。static: 默认值，元素按照正常流排列。relative: 元素相对于其正常位置进行定位。absolute: 元素相对于其最近的已定位的父元素进行定位。fixed: 元素相对于视口进行定位。
- Flexbox 布局 (Flexible Box Layout): 一种强大的布局方式，用于创建复杂的响应式布局。Flexbox 布局通过设置容器的
display属性为flex或inline-flex来启用。 - Grid 布局 (Grid Layout): 一种二维布局系统，允许将页面划分为行和列。Grid 布局通过设置容器的
display属性为grid或inline-grid来启用。
响应式设计 (Responsive Design)
响应式设计是一种使 Web 页面能够适应不同屏幕尺寸和设备的技术。响应式设计通常使用 Media Queries 来应用不同的 CSS 规则。
/* 当屏幕宽度小于 768px 时应用以下样式 */
@media (max-width: 768px) {
.container {
width: 100%;
}
}
CSS 性能优化
减少 HTTP 请求
每个 CSS 文件都需要一个 HTTP 请求。减少 CSS 文件的数量可以减少 HTTP 请求的数量，从而提高页面加载速度。
- 合并 CSS 文件: 将多个 CSS 文件合并为一个文件。
- 使用 CSS Sprites: 将多个小图标合并为一个图像文件，然后使用
background-position属性来显示不同的图标。 - Inline CSS: 将少量 CSS 代码直接嵌入到 HTML 文件中（不推荐大量使用，会影响可维护性）。
压缩 CSS 文件
压缩 CSS 文件可以减少文件的大小，从而提高页面加载速度。可以使用工具（如 uglifycss、cssnano）或构建工具（如 Webpack、Parcel）来压缩 CSS 文件。
使用 CDN
将 CSS 文件放在 CDN 上可以利用 CDN 的缓存和加速功能，提高页面加载速度。
避免使用 CSS Expressions
CSS Expressions 是 IE 特有的功能，允许在 CSS 中使用 JavaScript 代码。CSS Expressions 会导致性能问题，应该避免使用。
优化 CSS 选择器
CSS 选择器的性能影响很大。应该避免使用复杂的选择器，例如 * 选择器和后代选择器。尽可能使用类选择器和 ID 选择器。
减少重绘和重排
重绘 (Repaint) 是指浏览器重新绘制页面的一部分。重排 (Reflow) 是指浏览器重新计算页面的布局。重绘和重排会消耗大量的资源，应该尽量避免。
- 避免修改触发重绘和重排的 CSS 属性: 例如，修改
width、height、margin、padding等属性会触发重排。 - 使用
transform属性进行动画:transform属性不会触发重排。 - 使用
will-change属性:will-change属性可以告诉浏览器哪些属性将会被修改，从而使浏览器能够进行优化。
/* 告诉浏览器 transform 属性将会被修改 */
.element {
will-change: transform;
}
CSS 代码组织
BEM (Block, Element, Modifier)
BEM 是一种 CSS 命名规范，用于提高 CSS 的可维护性。BEM 将 CSS 类名分为三个部分：
- Block (块): 独立的、可重用的组件。
- Element (元素): 块的组成部分。
- Modifier (修饰符): 块或元素的不同状态或变体。
<div class="button button--primary">
<span class="button__text">Button Text</span>
</div>
.button {
/* 块的样式 */
}
.button--primary {
/* 块的修饰符样式 */
}
.button__text {
/* 元素的样式 */
}
CSS Modules
CSS Modules 是一种将 CSS 文件作用域限定在组件内的技术。CSS Modules 可以避免 CSS 类名冲突，提高 CSS 的可维护性。
Styled Components
Styled Components 是一种使用 JavaScript 编写 CSS 的技术。Styled Components 可以将 CSS 代码与 JavaScript 组件紧密结合，提高开发效率。
实战避坑经验总结
- 避免使用
!important:!important会覆盖其他 CSS 规则，导致样式难以维护。 - 注意 CSS 优先级: 理解 CSS 选择器的优先级，避免样式冲突。
- 使用 CSS 预处理器: CSS 预处理器（如 Sass、Less）可以提高 CSS 的编写效率和可维护性。 国内很多团队也使用
stylus，可以按需选择。 - 进行 CSS 代码审查: 定期进行 CSS 代码审查，确保 CSS 代码的质量。
- 利用浏览器的开发者工具: 熟练使用 Chrome DevTools 或 Firefox Developer Tools 可以帮助你调试 CSS 代码，发现性能问题。
复习前端 CSS 不仅仅是回顾基础知识，更重要的是理解其在实际项目中的应用和优化。希望本文能帮助你更好地掌握 CSS，构建高性能、可维护的 Web 应用。 掌握好前端技能后，配合 Nginx 做静态资源代理和缓存，可以有效提升网站性能。 同时，学习一些宝塔面板的 Nginx 配置技巧，可以更方便地进行服务器管理。
