CSS也是代码。本指南中其他主题的项目适用。它需要代码审查，并且需要进行自动和手动质量检查和规则 - 就像任何其他应用程序代码一样。可怜的CSS很难修改和扩展，并且很难改变或重构应用程序。
使CSS接近其样式的组件代码。阅读：文件。
解决设计不一致问题。UI设计有时在其样式上不一致，例如间距或颜色。避免将这些内容转移到应用程序的样式代码中; 不一致的不一致性会影响产品，但它们也往往会导致糟糕的CSS。一些不一致是微不足道的，而另一些则需要与设计师讨论。
规则
使用语义类名称。描述规则的目的（例如product），而不是规则的内容（例如redBackground）。然而，有少数例外，其中表现/实用类可能是有用的。
将相关规则放在文件中。这使维护人员更容易发现它们，因此在进行修改时更有可能将它们考虑在内。
每行一个选择器。每行多个对可读性有害。
避免选择器紧密耦合到DOM结构。这样做会使样式和DOM难以修改而不会破坏另一个。注意指定许多类（镜像DOM树）或使用>子组合子的选择器。
将声明置于深思熟虑的顺序中。包含随机（或按时间添加）顺序的声明的规则更难以阅读并在心理上快速可视化。它们也容易出现多个冲突（即意外覆盖）声明。一个经过深思熟虑的排序，其中最重要的声明首先出现，相关的声明被组合在一起，避免了这些问题。使用linter强制执行排序。已建立和流行的排序（其中包括预设）包括Concentric，RECESS和SMACSS。
使用标准颜色，间距等变量。这样做可以避免重复，并有助于确保一致性。
特点和技术
在不合适的地方避免固定尺寸。固定尺寸从浏览器的大小调整功能中取消了元素，导致布局不适应浏览器大小，并且在更改内容时需要手动调整。它们通常不具备现代布局功能。
在不合适的地方避免绝对定位。绝对定位通过将元素定位在特定坐标处，将元素从布局流中取出。这些需要手动调整以将周围的元件装配在一起，并且一旦被引入布局中就倾向于增殖。它们通常不具备现代布局功能。
避免使用浮动来定位元素。浮点数的目的是允许内容在元素周围流动。然而，它们在历史上以不是为其设计的方式使用，以实现当时CSS中无法实现的布局。现代布局功能如flexbox是更好的选择，因此现在使用浮动很少是必要或不合适的。
避免使用text-align对齐元素。这是一个继承的属性，因此使用它对齐的元素的子元素必须通过设置它们自己来抵消不需要的文本对齐text-align。使用flexbox来对齐元素。
避免使用!important。应该避免将此添加到声明中以强制赢得选择器特异性竞赛。它突破了正常的特殊规则（处于声明级别），并且在不使用另一个规则的情况下不能被覆盖!important- 趋向于导致其使用的扩散。
根据情况使用margin 或padding 。Margin 边距在元素周围创建空间; 用它来分隔元素和其他元素。相邻的垂直折叠。padding 填充在元素内（边框和内容之间）创建空间; 用它来分隔元素的内容和边缘。想想你需要达到的目标，如果你发现自己需要重复自己以保持一致的所需间距，那就再想一想。
避免使用过时的技术。CSS功能的进步继续为许多传统技术带来更新，更好的替代方案，并且在浏览器中广泛支持它们。使用它们。随着flexbox的出现，不再需要许多黑客攻击和解决方法。
注意不同浏览器中的功能支持。要么只使用应用程序支持的所有浏览器支持的那些，要么执行渐进增强。请参阅MDN文档页面上的 “我可以使用参考”和浏览器兼容性表。使用linter自动执行兼容性检查。
隔离
命名空间选择器避免无意中影响不需要的元素。类名和选择器是在全局空间（页面）中定义和操作的，因此必须采用策略来始终如一地轻松避免影响不需要的元素的规则。示例包括使用组件的根类作为其所有样式规则的选择器，BEM和CSS模块的前缀。即使采用这种策略，也需要特别注意避免父组件无意中影响嵌套在其中的其他组件。
避免“reaching ”嵌套组件以添加/覆盖其样式。这些样式与嵌套组件的内部实现（DOM和自己的样式）相关联，如果发生变化则不太可能被考虑 - 使它们变得脆弱且难以维护。这类似于在面向对象编程中使用/修改私有状态。相反，让嵌套组件在其根目录上支持“选项/模式类”，父组件可以应用于选择加入。
使组件不受任何关于它们在何处/如何使用的影响。影响组件元素外部的样式（例如定位/布局/间距）应留待使用该组件的父代码指定。
有关编写可伸缩CSS的更多信息，我建议Jarno Rantanen 使用“8个简单的规则来实现强大，可扩展的CSS体系结构”指南。
文档（CSS）
建立文档说明浏览器错误解决方法。这样做可以突出并解释不寻常或混乱的风格，为您未来的自我和他人带来好处。对于众所周知的问题，可以用简短的短语和指向例如flexbugs的链接简洁地完成。
解释非显而易见的“魔术值”的选择，例如宽度和间距。记录这些内容可以更有信心地进行未来的更改，并避免回归。选择适合特定最长期望值的宽度是一个例子。
HMTL
通常避免使用id属性。在页面上多次使用相同的id值无效。在由多个组件组成的应用程序中，一些组件具有多个实例，很容易违反该要求。但是，该属性对滚动到页面上特定位置的链接很有用。
使用语义标记。除了<div>和<span>之外还有许多元素，它们传达了意义。在适当的地方使用它们，例如：标题，部分，表格和段落。
避免使用CSS以外的任何类。使用类的选择器通常用于以编程方式选择特定元素，例如在JavaScript代码或集成测试中。在修改标记和CSS时，很容易忘记这些不太明显的用法 - 导致破损。使用专用的自定义属性（例如data-id，test-id）来代替。
将复杂的代码/表达式保留在HTML模板之外。模板通常需要依赖这些东西进行条件渲染和数据绑定。将复杂的模板与HTML模板混合使得自身和标记更难以遵循。相反，为它们提取变量和/或方法。