Java|如何写一份不错的CSS代码？飞利浦·斯塔克|编程|算法

先简单介绍一下：当我们在从事大项目或团队开发工作时，我们经常会发现我们写的代码，凌乱、难以阅读并且难以扩展。尤其是当一段时候后我们回头再看自己的代码，必须回想起当初自己写的时候的思路才能看懂。因此，人们尝试在代码风格上保持统一，然而，最大的困难是：修改一个较小的问题，都可能创建更多丑陋的 hack ，也可能 CSS 的小改变会影响 JavaScript 的功能。但是这些问题能在我们的项目开始的时候精心规划，就能很大程度上避免这些问题。今天就来讨论一下如何写一份不错的CSS代码
一个好的css代码是什么样的呢保持样式表可维护保持代码可读性保持样式表的可扩展性
要保持良好的CSS代码，首先需要订立一致的CSS团队规范，这就必须从CSS架构讲起。
CSS架构目前CSS主要有以下五种设计架构
1. OOCSS面向对象的CSS ，
结构和主题分离 - 减少对 HTML 结构的依赖主题和主题分离 - 增加样式的复用性
在OOCSS的基础上，出现了另一种设计模式
2. BEM也可以被当成一种命名规范，本质上使页面结构清晰
块（Block）、元素（Element__）、修饰符（Modifier--）
有以下几个规则
Block元素应该以元素本身的属性为主Element则以元素位置和形状为主Modifier则修饰当前的状态和主题Element一定是在Block之中，而不能独立于Block之外Modifier则更多的表示当前组件的形状和状态
【Java|如何写一份不错的CSS代码？】可以明显发现
结构清晰定位迅速功能明确
在面对组件化的场景时， Block 代表逻辑上和功能上独立的页面组件。 Element封装了行为(JavaScript)、模板、样式(CSS)和其他实现技术。
举个例子
en ru

block-name__element-name--modifier-name--modifier-value
在React当中，也采用了这样的命名方式
BEMnaming工具[1
，提供BEM命名的检测
然而在面对大型的项目时CSS的凌乱也很难让开发者愿意在茫茫多的代码中寻找可复用的代码
3. SMACSS(What’s Smacss)[https://smacss.com/

设计的主要规范有三点：
Categorizing CSS Rules（为css分类）Naming Rules（命名规范）Minimizing the Depth of Applicability（最小化适配深度）
为了实现清晰的CSS结构，将CSS分为
Base - 全局样式，如global-reset、normalize.cssLayout - 页面布局，如gridModule - 组件布局State - 元素状态，如visible、hiddenTheme or Skin - 更多是具体主题的配置样式JavaScript 勾子 (JavaScript hooks)
其中尤其建议JavaScript解除和样式的耦合
命名规范上出现了一些差异
.layout-header.is-hidden.theme-nav

最小化适配深度，减少html和css的耦合度，避免html的变动增加对css的影响
.sidebar ul h3 {.side {

4. ITCSS对CSS进行了更加详细的分层
如果从功能的角度上看呢，是将Base分成了Settings、Tools、Generic和Base ，而Objects、Components和Trumps则分别对应Layout、Module、（State、Theme），而这样设计的好处在于可以将代码的复用性进一步提升
5. ACSS一个样式属性一个类，其中的典型代表就是TailwindCSS[2
，缺点则是破坏了语义化
.block{ display: block; .hidden { display: none; .p-2 { padding: 0.75rem; .flex { display: flex; .text-base { font-size: 1rem; .bg-green-200 { background-color: #123456 I am Ok

而上述的架构思想，更多则是需要团队成员的一致性认同，才能实现在代码风格上的统一。
除了这些开发自律性上的代码规范外，还有什么其他的方式来提升CSS质量呢？
CSS预处理器在预处理器中，同样提供了众多的方法来简化与控制CSS代码，以stylus为例
1. 变量font-size = 14px body font font-size Arial sans-serif pad(types = padding n = 5px) if padding in types padding n if margin in types margin nbody pad()body pad(margin)body pad(padding margin 10px) // Yields：body { padding: 5px;body { margin: 5px;body { padding: 10px; margin: 10px;

2. 函数add(a b = a) a + b add(10 5) // => 15 get(hash key) return pair[1
if pair[0
== key for pair in hash hash = (one 1) (two 2) (three 3) get(hash two) // => 2 get(hash three) // => 3 get(hash something) // => null

3. 内建函数// 提取颜色分量red(#c00)// => 204red(#000 255)// => #f00