商业网站CSS结构的提示（或任何与此相关的内容）-巨人网络通讯

摘要

最后修改：2020年10月16日阅读时间：观点CSS和HTML很容易理解。但是，在构建网站（和应用）以使其可重复使用的方式中，学习最佳的架构方法需要花费多年的实践时间，将来可维护的，并使开发人员感到高兴。这里的建筑是什么意思？这是CSS代码的结构。您将其分离为文件的方式，类名背后的规则，选择器的深度，它层叠的方式，继承了什么您如何设置组件，页面，元素，

最后修改： 2020年10月16日阅读时间：观点

CSS和HTML很容易理解。但是，在构建网站（和应用）以使其可重复使用的方式中，学习最佳的架构方法需要花费多年的实践时间，将来可维护的，并使开发人员感到高兴。

这里的建筑是什么意思？这是CSS代码的结构。您将其分离为文件的方式，类名背后的规则，选择器的深度，它层叠的方式，继承了什么您如何设置组件，页面，元素，和修饰符。

要将最佳做法应用于包含数百页的所有这些网站组件，各种内容，屏幕浏览量边缘情况，考虑添加更多内容并修改现有内容是困难的部分。

这是要考虑的主要部分之一。您不应该根据您所在的页面来设置样式。不要做。homepage … {} styles。如果您的页面有一个版块，样式部分。接着就，随即，您也可以在其他页面上重复使用它。如果有按钮，将按钮样式设置为。button {} and reuse it elsewhere。对所有视图均有效。

这是迄今为止可以使用的最常见的建议和效果最好的方法。

现在，您如何管理页面特定的差异？因为这是为每页设置样式的最常见原因？出色地，有几种方法：

在“ BEM”中， “ M”代表修饰符。这是。block__child-修饰符外观。即使您不使用BEM，修饰符仍然存在。如果组件或部分有变化，为此添加一个修饰符。

理想情况下，设计人员应考虑周全，并尽量减少变化以保持代码干净，但您不必担心会添加更多内容。理想情况下，变体应该只覆盖一些属性，并且应该使用相同的标记。这是在HTML阶段使用组件的好方法-添加所需的标签，并使它们在整个网站中保持一致。不要因为修饰符类而添加新的。

另一种方法是根据上下文进行样式设置。一个按钮永远是一个按钮，它有它的。按钮类以及所有内容但您仍然可以调整它如果它是另一个组件的一部分。通常这不是一个好主意，因为它会引起不一致，但这也是一个很现实的用例。否则，您最终会得到20个带有怪异名称的修饰符。

上下文相关样式是指仅当一个组件是另一个组件的子组件时才对其进行样式设置。让我们以商品卡为例。默认情况下具有其样式。但是，如果它是彩色部分的一部分，并且侧面有一些文字，设计要求卡片周围有一些其他元素（例如动画形状等）。

在这种情况下，你用风格。父母。card {} selector。您只需要像使用修饰符一样覆盖一些属性即可。当你这样做的时候卡片本身并不会增加样式的复杂性，但在特定的边缘情况下仍然可以正常运行。

当你想到这个您还可以查看如何在“每页”基础上应用它。如果设计中存在一些奇怪的边缘情况，并且与标准组件视图（以及它们相互交互的方式）有一些细微的差异，那么您可以使用来为其设置样式。homepage {} selector。请记住要谨慎使用。根据我们的经验，这样的样式很少超过几行代码。

需要添加的重要说明：上下文风格通常不是一种好习惯。 理想情况下，您甚至不需要它。大多数时候，您将拥有可以很好地完成这项工作的修饰符。即使在某些版本中是现实的，用严格的规则深入研究好的抽象代码可能太昂贵了。

大多数商业网站（以及与此相关的许多其他网站）都将内容分为几个部分。每个部分都是一个带有修饰符类的组件，该修饰符类定义了各种属性。关于类的结构的一种建议是：

部分。段容器–如果需要，可以将其作为“组件名称”，它保持一致的填充/边距或任何所需的内容。
部分。section-border-top –是修饰符。这不使用BEM，但是您可以根据需要将其“翻译”为截面容器边界。
部分。欢迎部分–将是姓名的部分。

此处的命名约定也无关紧要。有了这样的部分，您将可以自由地在设计所创建的边缘情况下将样式调整为可重用的组件（这是由于必须遵循的不一致或更复杂的视图）。

您很可能会使用Sass或其他类似的预处理器。在文件分离方面，有很多方法，但我们采用的是以下一般结构：

常规-常规通常由设置代码组成，例如使网格工作， HTML标记的样式，重置/归一化，一些特定于CMS的样式等。
页面–如上所述的页面样式。理想情况下，您应该在这里保留很少的代码。
组件–构建的核心–各种组件都位于此处。一个提示是，您可以拥有“元素”或“杂项”，这些元素可以将较小的组件块放入一个文件中，而不是80个文件中。当然，较大的文件最好放在单独的文件中。
布局-整体风格，例如，在标题上，页脚，然后是页面布局，网格的修饰符，依此类推。
插件–插件产生的任何外部信息，扩展名或其他内容。最好将它们分开，然后再在其他项目中重复使用它们。

干净代码的一个好兆头是它看起来多么简单。没有奇怪的属性，一切都有目的压痕小。不必要时“看起来很聪明”的选择器不会使您的代码“很酷”。如果您可以替代#container之类的东西 > 。row div[rel=”something”] with 。rel-something（想象是一个有意义的类名），那么您应该稍微更新一下标记。这样做的目的是使一切变得更简单。

保持较低的缩进量。您很少需要超过三个级别。让我们来看一个示例。入门班：


。entry { . }
.entry-title { . }

看到没有必要真正缩进。里面的条目标题。入口。之后，在您可以使用的文件下方添加修饰符时。entry-modifier {} and .条目修饰符。entry-title {}

通过这种方法，将来覆盖样式会更容易。让我们看另一个常见的示例：您具有nav的标记。网站导航 > ul。列表菜单 > 。清单项目* 5>一个（emmet）

现在，造型所有你需要的是：


.site-nav {} - component 1

.list-menu {} - component 2
.列表菜单。list-item {}
.list-menu a {}

如果内部有更多组件，像其他下拉菜单一样，您可以将它们直接嵌套在里面。列表菜单。你不用写网站导航。列表菜单。项目清单。落下{} (4 levels deep) when you can have two levels of .列表菜单。dropdown {}

这是为了可维护性。您会在类似的帖子中找到一个常见的示例，那就是不要将颜色变量设置为$ 红色的，您可以将其设置为$ 基本的或$ secondary。

原因是当需要更改时，变量$ red将输出蓝色。您想要更改自己的方式更有意义 primary 颜色，不是你的 red 颜色，正确的？

其他类型的颜色和属性也一样。假设您有一些分隔内容的行（例如小时> 标签）。你说的。行破折号，因为它是破折号。很有道理。但是，随之而来的是变化，它必须被点缀。您是否将其重命名为。点划线？这不是修饰符，这是组件。而不是这个您可以将其命名为。行分隔符。然后，如果您想具体一点，您可以为其添加修饰符。点或。虚线。这种命名通常是在构建网站时花费最多时间的。

有无数的好与坏做法。获得更好结果的一种方法是定义规则并遵循规则。很难想出这样的规则，因此，一个很好的建议是浏览网络并尝试收集有关架构的所有可能信息，例如命名约定，好的做法如何编写可维护的代码等等。

产生好的代码需要很多时间和成千上万行代码。在做所有这些的同时，总是问自己：“这样的规模吗？”， “我可以重复使用它吗？”， “我覆盖得太多了吗？”， “这样命名是否有意义？”。你做的越多，您的决策越理想，您的工作速度就会越快。

在良好的基础上进行投资将减少项目的来回往返，并且将来需要进行的任何更改都将更易于实现。

浏览更多：询问您的代理商业务发展

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术，探索创新的方法来优化网站性能并改善用户体验。亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。

全 部 栏 目

全部栏目