作者｜杰辰
原文｜%2F2Wo3G%2B0kSIE%2FGpBfNFAnfIjL6JRZbcC2K2#rd
译者注：随着Node.js、react-native等技术的不断出现，以及互联网行业创业的层出不穷，学习一些后端知识，成为一名全栈攻城工程师，快速制作原型，并展现你的创造力css提高，对于程序员，尤其是那些正在创业的程序员来说变得越来越重要。 下面我们就跟随美国知名开发者网站上的热门文章《Leveling up in 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；
边距：20px；
内边距：30px；
边框半径：4px；
位置：绝对；
顶部：0；
右：0；
底部：0；
左：0；
在前面的反例中，我们耦合了这些关注点。 启动类不仅包含自己的样式和逻辑，还包含其子节点。 为了解决这个问题，我们可以将这段代码分成两个新的类。
.splash {
位置：绝对；
顶部：0；
右：0；
底部：0；
左：0；
现在我们有两类splash 和splash content。 我们可以将splash视为一个普通的全屏类，它可以有任何子节点。 子节点的所有属性都在启动内容中css提高，并且与父节点的属性完全前馈。
您可以通过阅读以下文章了解有关单函数原则在样式表和类中的应用的更多信息。 《单功能原则在CSS中的应用》和《单功能原则》。
简单胜于复杂
如果你问任何成功的前端开发人员或 CSS 架构师，他们会告诉你，他们永远不会对自己的代码完全满意。 编写好的 CSS 是一个迭代的过程。 从简单开始，遵循基本的 CSS 规则和样式手册，并不断迭代。
我很想听听您的 CSS 学习之旅。 您最喜欢的命名约定是什么？ 您如何组织代码文件？ 您可以随时在评论或推文中告诉我。
发表评论