编译：伯乐在线/小谢
译者注：随着Node.js、react-native等技术的不断出现，以及互联网行业创业的不断涌现，学习一些后端知识，成为全栈攻城高手，快速制作原型，并展现你的创造力，对于程序员，尤其是那些创业的程序员来说变得越来越重要。 让我们跟随美国知名开发者网站上的热门文章《Leveling up in CSS》，从改进你的CSS方法开始吧。
当你第一次学习 CSS 时，它看起来非常简单。 毕竟，这只是风格，不是吗？
然而，随着你的不断了解。 很快导航栏css代码，你就会发现CSS并不像你想象的那么简单，它复杂而深奥。
做好这四件事可以让你在大规模使用CSS时保证代码的健壮性：使用适当的语义、模块化、采用统一的命名约定、遵循单一功能的原则。
使用适当的语义
在 HTML 和 CSS 编程中存在语义标记的概念。 语义是指短语的含义以及它们之间的关系。 在HTML编程中，这意味着需要使用合适的标签名来进行标记。 下面是一个经典的反例。
类=“页脚”>
语义 HTML 非常简单明了。 另一方面，语义 CSS 更加具体和主观。 编写语义CSS意味着类名在选择类型时传达结构和功能信息。 类名应该容易理解。 确保它们不是太具体和具体。 这样，您就可以重复使用它。
要探索什么是一个好的类名，请查看 Medium 站点上的这个简化的 CSS 示例。
类=“流”>
类=“流项目”>
类=“文章”>
类=“文章内容”>
通过这样的代码，你可以立即认识到它们的结构、功能和含义。 父节点的类名是stream，内容是文章列表。 其子节点的类名为streamItem，内容为文章列表中的具体文章。 这使得我们很容易理解父节点和子节点之间的关系。 并且，这些类可以在每个具有文章功能的页面中使用。
您可以像阅读一本书一样阅读 HTML 和 CSS。 它会告诉你一个故事。 通过故事你可以了解故事中的每个人物以及他们之间的关系。 语义丰富的 CSS 代码易于理解且易于维护。
如果你想了解更多语义学知识，可以看看《如何语义化地命名类》、《CSS命名并不简单》和《语义化且可识别（代码命名）》，然后是《关于HTML命名和后端架构》。
模块化的
在这个组件库时代（例如 React），模块化是王道。 组件是从已重构的套接字创建的可组合模块。 下面是 Product Hunt（一个发布优秀创业项目的网站）前端页面。 作为练习，我们将此页面分解为一系列组件。
每个颜色框代表一个组件，流节点又分为多个流项子节点。
类=“流”>
类=“流项目”>
大多数组件可以分解为更小的组件。
每个流项目组件都有缩略图和特色产品信息。
类=“流”>
类=“流项目”>
类=“帖子”>
src="thumbnail.png" class="postThumbnail"/>
类=“内容”>
由于流组件及其子控件是完全独立的，因此您可以轻松调整或替换 post 组件，而不会对流组件产生任何影响。
使用组件思维将使您的代码前馈。 解耦的代码越多，类之间的依赖关系就越低。 这将使您的代码更容易更改，并使您的代码在不更改的情况下工作更长时间。
组件驱动设计
在模块化 CSS 时，首先将设计分解为组件。 您可以使用纸和铅笔，或者 Illustrator 或 Sketch 等程序。 确定如何命名该组件，同时阐明每个组件之间的关系。
要阅读更多关于 CSS 组件驱动的文章，请参阅《CSS 构建：可扩展和模块化处理》、《使用 Sass 编写模块化 CSS》和《模块化你的后端代码——编写高度可维护和有组织的干净代码》。
采用统一的命名约定
目前有数十种不同版本的 CSS 命名约定。 有些人非常坚持自己选择的命名约定，以至于他们认为自己的命名约定比其他人更好。 事实上，不同的人喜欢不同的命名约定。 我见过的最好的建议是：选择您认为最合适的命名约定。
以下是常用命名约定的简要列表：
我最喜欢的命名约定是 BEM。 BEM 代表块、元素和修饰符。 Yandex（相当于美国的微软搜索引擎）提出了它（指的是 BEM），以解决其 CSS 代码库中的扩展问题。
BEM 是一种非常简单且非常严格的命名约定。
。堵塞{}
.block__element{}
.block --修饰符{}
块代表高级类。 元素是块的子模块。 修饰符代表不同的状态。
类=“搜索”>
类型 =“search__btn search__btn --active”/>
在前面的示例中，搜索是块，搜索按钮是其元素。 如果要修改按钮的状态，我们可以为按钮调低一个修饰符，比如active。
关于命名约定需要记住的一件事是，无论您喜欢哪种命名约定，您通常都会继承或使用具有不同标准的代码库。 请敞开心扉学习新标准并对 CSS 进行不同的思考。
您可以在深入了解 BEM 语法、BEM 101 和 BEM 简介中阅读有关 BEM 的更多信息。 有关不同的命名约定，请参阅 OOCSS、ACSS、BEM、SMACSS：这些是什么？ 我应该使用哪个？ ”。
遵循单一功能原则
单一功能原则规定每个模块和类应该有一个单一的功能，并且该功能应该由类完全封装。
在CSS中，单一功能原则意味着每段代码、类和模块只做一件事。 当我们提交 CSS 文件时，这意味着每个单独的组件（例如轮播效果和导航栏）都应该有自己的 CSS 文件。
/成分
|-轮播
|- |-carousel.css
|- |-carousel.partial.html
|- |-carousel.js
|-导航
|- |-nav.css
|- |-nav.partial.html
|- |-nav.js
组织文件的另一种常见方法是按功能对它们进行分组。 例如，如上所示，所有与轮播处理组件相关的文件都被分类在一起。 使用这些方法可以让您更轻松地找到相关文件。
除了分离组件的样式外，最好通过单一功能的原则来分离全局样式。
/根据
|-application.css
|- 版式.css
|-颜色.css
|-grid.css
在这种情况下，每个相关样式都被分成自己的样式文件。 这样，如果您想更改样式中的颜色，您将能够轻松找到它。
无论使用哪种形式来组织文件结构，在决定时都尽量参考单一功能原则。 一旦文件开始变得臃肿，请考虑根据逻辑功能将其划分为多个部分。
有关组织文件结构和 CSS 架构的更多文章，请参阅《Sass 美学 1：架构和组织样式文件》和《可扩展和可维护的 CSS 架构》。
当单一功能原则应用于每个 CSS 类选择器时，这意味着每个类选择器都有一个独特的功能。 也就是说，根据不同的关注点，将样式分离到不同的类选择器中。 这是一个经典的例子：
。溅{
背景：#f2f2f2；
颜色：#fffff；
边距：20 像素；
内边距：30px；
边框半径：4px；
位置：绝对；
顶部：0；
右：0；
底部：0；
左：0；
在前面的反例中，我们耦合了关注点。 启动类不仅包含自己的样式和逻辑，还包含其子节点。 为了解决这个问题，我们可以将此代码分成两个新类。
.splash {
位置：绝对；
顶部：0；
右：0；
底部：0；
左：0；
现在我们有两类splash 和splash content。 我们可以将splash当作普通的全屏类，它可以有任何子节点。 所有子节点关心的属性都在splash内容中，与父节点的属性完全前馈。
您可以通过阅读以下文章了解有关单函数原则在样式表和类中的应用的更多信息。 单功能原则在 CSS 中的应用以及单功能原则。
简单胜于复杂
如果您询问任何成功的前端开发人员或 CSS 架构师，他们会告诉您他们永远不会对自己的代码完全满意。 编写好的 CSS 是一个迭代的过程。 从简单开始导航栏css代码，遵循基本的 CSS 规则和样式手册，然后进行迭代。
我很想听听您的 CSS 学习路径。 您最喜欢的命名约定是什么？ 您如何组织代码文件？ 您可以随时通过评论或发推文让我知道。
