CSS工程化

上一篇文章给大家介绍了工程化及工程化与构建工具的关系，从这篇文章开始我们聚焦到CSS工程化相关内容。聪明的小明会问，书写CSS也会涉及到工程化的内容吗？如果你只是单纯的书写原生CSS，那么确实不能够称之为工程化，但是现在书写CSS没有那么简单了，多了很多事要做。

CSS工程化主要体现在以下几个方面

模块模块化是将CSS代码分解成独立的，可复用的模块，从而提高代码的可维护性和可读性。通常吗，每个模块都关注一个特定的功能或组件的样式。这有助于减少样式之间的依赖和冲突，使得找到和修改相关样式变得更容易。模块化的实现可以使得原生的css文件拆分，或使用预处理器（如Sass）的功能（例如@import和@use）来实现
命名规范为CSS类名和选择器定义一致的命名规范有助于提高代码的可维护性和可读性。

以下是一些常见的命名规范

BEM（Block,Element,Modifier）：BEM是一种命名规范将类名拆分成三个部分：块（Block）、元素（Element）和修饰符（Modifier）这种方式有助于表示组件的层级关系和状态变化。（navigaction_link_active）
OOCSS（面向对象的CSS）：OOCSS指在将可复用的样式划分成独立的“对象”，从而提升代码的可维护性和可读性。这种方式强调将结构（例如布局）与外观（例如字体样式和颜色）分离。这样就可以更容易的复用和组合样式，创建件更灵活的UI组件。

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

/* 结构样式 */
.btn{
    display:inline-block;
    padding:10px 20px;
    border:none;
    font-size:16px;
    cursor:pointer;
}
.btn--primary{
    color:white;
    back-ground:red;
}
.btn--secondary{
    color:white;
    back-ground:gray;
}

SMACSS（可扩展和模块化的CSS架构）：是一种css编写方法（是一种规范或者方法论），旨在提高代码可维护性、可扩展性和灵活性。SMACSS将样式分为五个类别（Base、Layout、Module、State、Theme）这有助于组织css代码并使其易于理解和修改。
- Base：包含全局样式和元素默认样式（例如浏览器重置、全局字体设置等）。
- Layout：描述页面布局的大致结构（例如页面分区、网格系统等）。
- Module：表示可复用的UI组件（例如按钮、卡片、表单等）。
- State：表示UI组件的状态（例如激活、禁用、隐藏等）通常，状态类会与其他类一起使用以修改显示。
- Theme：表示UI组件的视觉样式（例如颜色、字体等）通常，主题类用于支持多个主题或在不同上下文中使用相同的组件。

预处理器

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

后处理器

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

代码优化

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

CSSO：CSSO是一个CSS优化工具，可以压缩代码，删除冗余规则和合并相似的声明。
PurageCSS：PurageCSS是一个用删除无用规则的CSS工具，它用于拆分项目的HTML,JS和模块文件来检测试剂使用的样式，并删除未使用的样式。
clean-css：clean-css是一个高效的CSS压缩工具，可以删除空格、注释和重复的规则等，以减小件大小。

版本控制

适用版本控制系统（例如Git）可以更好的管理css代码的变更历史，合并冲突和多人协作。此外它还可以帮助我们快速回滚以前的版本，以便排查和修复问题。

构建工具和自动化

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

响应式设计和移动优先

响应式设计是一种使网站在不同设备和屏幕尺寸上能够保持良好显示效果的方法，通常使用媒体查询、弹性布局（Flexbox和CSS Grid）和其他技术实现。移动优先策略是从最小屏幕尺寸（例如手机）开始样式设计，逐步增强以适应更大的屏幕尺寸（例如平板和桌面），这种放有助于代码的简洁性，并确保网站在移动设备上的性能优先。

设计系统和组件库

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

因此整个CSS都是在逐渐向工程化靠近的，上面所罗列的那么几点都是CSS工程化方面的体现。

CSS工程化概括

CSS工程化