Skip to main content

CSS工程化

工程化​

工程是指一件事要做的步骤非常非常多，并且每一个步骤是有先后的顺序。工程这个词最早不是出现在IT行业，而出现在建筑行业，因为建筑行业里面，例如修楼，里面包含了一系列繁杂的工作，并且每一项工作是有先后顺序的，所以才有了建筑工程的概念。

随着软件规模越来越大，要做的事情也是越来越多，软件开发也引入了工程的概念。

现在前端开发也出现了前端工程化的概念。因为前端要做的事情，并且能做的事情也越来越多了。从一开始构建整个项目、到编写代码，如果是使用一些其他工具(Less、Sass、TypeScript等)编写的，还涉及到编译、测试、打包，能罗列出来的事情有一大堆，而不像以前只是写几个页面那么简单。

构建工具​

在前端工程化发展的路上，出现了构建工具，很多人直接将前端工程化和前端构建工具划等号，这个其实是不对的：前端工程化 != 前端构建工具。

严格意义上来讲，工程化实际上是一套方法论，目的是解决大型项目和团队协作中遇到的代码维护和扩展问题，目标是为了提高开发效率、代码质量和可维护性。而前端构建工具只是前端工程化里面的一环，不能够划等号。

前端工程化

前端要做的事情是越来越多了，但实际上有一部分工作是和业务逻辑无关的：

  • 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。
  • 代码转换：将TypeScript/ES6编译成JavaScript、将SCSS编译成CSS等。
  • 代码优化：为CSS代码添加兼容性前缀等。

这些工作虽然和业务逻辑无关，但是又不得不做。因此期望有那么一种工具能够帮助我们把上面的事情按照一定的顺序自动化的完成，这种工具就是前端构建工具。

总的来说，构建工具就是将开发环境下的项目代码构建为能够部署上线的代码。通过构建工具，可以省去繁杂的步骤，直接一条指令就能对代码进行相应处理，之后要做的就是部署上线即可。

目前前端领域有非常的多的构建工具，整体来讲可以分为三代：

  • 第一代构建工具：以Grunt、Gulp为代表的构建工具。
  • 第二代构建工具：以Webpack为代表的构建工具。
  • 第三代构建工具：以Vite为代表的构建工具。

CSS工程化​

模块化​

模块化是将CSS代码分解成独立的、可重用的模块，从而提高代码的可维护性和可读性。通常，每个模块都关注一个特定的功能或组件的样式。这有助于减少样式之间的依赖和冲突，也使得找到和修改相关样式变得更容易。模块化的实现可以通过原生的 CSS 文件拆分，或使用预处理器(如Sass)的功能来实现。

命名规范​

为CSS类名和选择器定义一致的命名规范有助于提高代码的可读性和可维护性。

预处理器​

CSS预处理器(如 Sass、Less 和 Stylus)是一种编程式的CSS语言，可以在开发过程中提供更高级的功能，如变量、嵌套、函数和混合等。预处理器将这些扩展语法编译为普通的CSS代码，以便浏览器能够解析。

后处理器​

CSS后处理器(如 PostCSS)可以在生成的CSS代码上执行各种操作，如添加浏览器前缀、优化规则和转换现代CSS功能以兼容旧浏览器等。它通常与构建工具一起使用，以自动化这些任务。

代码优化​

代码优化旨在减少CSS文件的大小、删除无用代码和提高性能。一些常见的优化工具包括。

note
  • CSSO：CSSO是一个CSS优化工具，可以压缩代码、删除冗余规则和合并相似的声明。
  • PurgeCSS：PurgeCS是一个用于删除无用 CSS 规则的工具。它通过分析项目的 HTML、JS 和模板文件来检测实际使用的样式，并删除未使用的样式。
  • CleanCSS：clean-css是一个高效的 CSS 压缩工具，可以删除空格、注释和重复的规则等，以减小文件大小。
版本控制​

使用版本控制系统(如Git)可以更好地管理CSS代码的变更历史、合并冲突和多人协作。此外，它还可以帮助您快速回溯到以前的版本，以便排查和修复问题。

构建工具和自动化​

构建工具可以帮助您自动化开发过程中的任务，如编译预处理器代码、合并和压缩CSS文件、优化图片等。这可以提高开发效率，确保项目的一致性，并简化部署流程。这些工具通常可以通过插件和配置来定制，以满足项目的特定需求。

响应式设计和移动优先​

响应式设计是一种使网站在不同设备和屏幕尺寸上都能保持良好显示效果的方法。这通常通过使用媒体查询、弹性布局(如Flexbox和CSS Grid)和其他技术实现。

移动优先策略是从最小屏幕尺寸(如手机)开始设计样式，然后逐步增强以适应更大的屏幕尺寸(如平板和桌面)。这种方法有助于保持代码的简洁性，并确保网站在移动设备上的性能优先。

设计系统和组件库​

设计系统是一套规范，为开发人员和设计师提供统一的样式指南(如颜色、排版、间距等)、组件库和最佳实践。这有助于提高项目的一致性、可维护性和协作效率。组件库通常包含一系列预定义的可复用组件(如按钮、输入框、卡片等)，可以快速集成到项目中。一些流行的组件库和UI框架包括Bootstrap、Foundation和Material-UI等。

CSS命名规范​

BEM​

BEM是一种命名规范，将类名分为三个部分：块(Block)、元素(Element)和修饰符(Modifier)。这种方法有助于表示组件之间的层级关系和状态变化。如：navigation__link--active。

OOCSS​

OOCSS(面向对象的CSS)：OOCSS旨在将可重用的样式划分为独立的对象，从而提高代码的可维护性和可扩展性。

这种方法强调将结构(如布局)与皮肤(如颜色和字体样式)分离。这样可以让你更容易地复用和组合样式，创建更灵活的UI组件。

<button class="btn btn--primary">Primary Button</button>
<button class="btn btn--secondary">Secondary Button</button>

SMACSS​

SMACSS是可扩展和模块化的CSS架构。它一种CSS编写方法，旨在提高CSS代码的可维护性、可扩展性和灵活性。

SMACSS将样式分为五个基本类别：Base、Layout、Module、State和Theme，这有助于组织CSS代码并使其易于理解和修改：

  • Base：包含全局样式和元素默认样式，例如：浏览器重置、全局字体设置等。
  • Layout：描述页面布局的大致结构，例如：页面分区、网格系统等。
  • Module：表示可重用的 UI 组件，例如：按钮、卡片、表单等。
  • State：表示 UI 组件的状态，例如：激活、禁用、隐藏等。通常，状态类会与其他类一起使用以修改其显示。
  • Theme：表示 UI 组件的视觉样式，例如：颜色、字体等。通常，主题类用于支持多个主题或在不同上下文中使用相同的组件。

CSS预处理器​

在面对比较大的项目的时候，代码量急剧提升，普通的CSS书写方式不方便维护、扩展、复用。

通过CSS预处理技术就可以解决上述的问题，而基于预处理技术的语言，可称之为CSS预处理语言。

CSS预处理语言会提供一套增强语法，在书写CSS的时候就使用增强语法来书写，书写完毕后通过预处理技术编译为普通CSS语言即可。

CSS预处理器的出现，解决了如下的问题：

  • 代码组织：通过嵌套、模块化和文件引入等功能，使CSS代码结构更加清晰，便于管理和维护。
  • 变量和函数：支持自定义变量和函数，增强代码的可重用性和一致性。
  • 代码简洁：通过简洁的语法结构和内置函数，减少代码冗余，提高开发效率。
  • 易于扩展：可以通过插件系统扩展预处理器的功能，方便地添加新特性。

目前前端领域常见的CSS预处理器有三个：

Sass​

Sass是最早出现的CSS预处理器，出现的时间为2006年。Sass提供了很多丰富的功能，例如有声明变量、嵌套、混合、继承、函数等，另外Sass还有强大的社区支持以及丰富的插件资源，因此Sass比较适合大型项目以及团队协作。

Less​

Less也是一个比较流行的CSS预处理器，该预处理器是在2009年出现的，该预处理器借鉴了Sass的长处，并在此基础上兼容CSS语法，让开发者开发起来更加的得心应手。

@primary-color: #4CAF50;
    
.container {
  background-color: @primary-color;
  padding: 20px;

  .title {
    font-size: 24px;
    color: white;
  }
}

早期的Sass只有缩进式语法，而Less的出现降低了开发者的学习成本。因为Less兼容原生CSS语法，相较于Sass，Less学习曲线平滑、语法简单，但是编程功能相比Sass要弱一些，并且插件和社区也没有Sass那么强大，Less的出现反而让Sass出现了第二版语法(类CSS语法)。

Stylus​

Stylus是一种灵活且强大的CSS预处理器，其语法非常简洁，具有很高的自定义性。

Stylus支持多种语法风格，包括缩进式和类CSS语法。Stylus也提供了丰富的功能，如变量、嵌套、混合、条件语句、循环等。相较于Sass和Less，Stylus的社区规模较小，但仍有不少开发者喜欢其简洁灵活的特点。

primary-color = #4CAF50

.container
  background-color primary-color
  padding 20px

  .title
    font-size 24px
    color white

CSSDB​

CSSDB是一个跟踪CSS新功能和特性的数据库，可以查询某一个特性目前处于哪一个阶段，具体的实现情况目前是什么样的。

CSS规范一共可以分为5个阶段：从Stage 0(草案)到Stage 4(已经纳入W3C标准)：

  • Stage 0：草案 - 此阶段的规范还在非正式的讨论和探讨阶段，可能会有很多变化。通常不建议在生产环境中使用这些特性。
  • Stage 1：提案 - 此阶段的规范已经有了一个正式的文件，描述了新特性的初步设计。这些特性可能在未来变成标准，但仍然可能发生较大的改变。
  • Stage 2：草稿 - 在这个阶段，规范已经相对稳定，描述了功能的详细设计。一般来说，浏览器厂商会开始实现并测试这些特性。开发者可以在实验性的项目中尝试使用这些功能，但要注意跟踪规范的变化。
  • Stage 3：候选推荐 - 此阶段的规范已经基本稳定，主要进行浏览器兼容性测试和微调。开发者可以考虑在生产环境中使用这些特性，但需要确保兼容目标浏览器。
  • Stage 4：已纳入 W3C 标准 - 这些特性已经成为 W3C CSS 标准的一部分，已经得到了广泛支持。开发者可以放心在生产环境中使用这些特性。
Last updated on