商业网站CSS结构的提示(或其他相关内容)
已发表: 2020-12-17CSS和HTML很容易理解。 但是,在构建网站(和应用程序)时,要使它们可重用,将来可维护并使开发人员满意,就需要学习最佳的架构方法,这需要多年的实践。
这里的建筑是什么意思? 这是CSS代码的结构。 将其分为文件的方式,类名背后的规则,选择器的深度,级联的方式,继承的内容,如何设置组件,页面,元素和修饰符。
要将最佳实践应用于具有数百个页面,各种类型的内容,屏幕视图,边缘情况以及考虑在顶部添加更多内容并修改现有内容的所有这些网站组件,是困难的部分。
使用组件而不是页面进行构建
这是要考虑的主要部分之一。 您不应该根据您所在的页面来设置样式。 不要使用.homepage…{}样式。 如果您的页面有一个版块,请为该版块设置样式。 这样,您也可以在其他页面上重复使用它。 如果有按钮,则将按钮样式设置为.button {},然后在其他地方重用它。 对所有视图均有效。
这是迄今为止可以使用的最常见的建议和效果最好的方法。
现在,您如何管理页面特定的差异? 因为这是为每页设置样式的最常见原因? 好吧,有几种方法:
使用修饰符。
在“ BEM”中,“ M”代表修饰符。 这是.block__child-modifier外观。 即使您不使用BEM,修饰符仍然存在。 如果组件或部分有变化,请为其添加修饰符。
理想情况下,设计人员应考虑周全,并将变化保持在最低限度,以保持代码干净,但您不必担心会添加更多代码。 理想情况下,变体应仅覆盖一些属性,并且应使用相同的标记。 这是在HTML阶段处理组件的好方法-添加所需的标签,并使它们在整个站点中保持一致。 不要因为修饰符类而添加新的。
设置儿童组件的样式。
另一种方法是根据上下文样式。 按钮始终是按钮,它具有.button类以及所有内容,但是如果它是另一个组件的一部分,则仍然可以对其进行调整。 这通常不是一个好主意,因为它会引起不一致,但这也是一个很现实的用例。 否则,您将最终得到20个带有怪异名称的修饰符。
上下文样式是指仅当一个组件是另一个组件的子组件时才对其进行样式设置。 让我们以商品卡为例。 默认情况下具有其样式。 但是,如果它是彩色部分的一部分,并且侧面带有一些文本,则设计要求该卡周围还应包含其他一些元素(例如动画形状等)。
在这种情况下,您可以使用.parent .card {}选择器设置样式。 您只需要像使用修饰符一样覆盖一些属性即可。 当您执行此操作时,卡本身不会为其样式增加更多的复杂性,但在特定的边缘情况下仍会正常工作。
考虑这一点时,您还可以看到如何在“每页”基础上应用它。 如果设计中存在一些奇怪的情况,并且与标准组件视图(以及它们全部一起交互的方式)存在一些细微差异,则可以使用.homepage {}选择器对其进行样式设置。 请记住要谨慎使用。 根据我们的经验,此类样式很少超过几行代码。
需要补充的重要注意事项:通常情况下,基于上下文的样式不是一个好习惯。 理想情况下,您甚至不需要它。 在大多数情况下,您将拥有可以很好地完成工作的修饰符。 即使在某些构建中是现实的,但深入使用严格的规则编写好的抽象代码也可能太昂贵。
分节工作
大多数商业网站(以及与此相关的许多其他网站)都将内容分为几个部分。 每个部分都是具有定义各种属性的修饰符类的组件。 关于类的结构的一种建议是:
- section.section-container –如果需要,它可以是“组件名称”,其中包含一致的填充/边距或任何所需的内容。
- section.section-border-top –是修饰符。 它不使用BEM,但是如果需要,您可以将其“翻译”为截面容器边界。
- section.section-welcome –是该部分的名称。
这里的命名约定也不重要。 使用此类部分,您将可以自由调整样式,以在设计创建的边缘情况下将其调整为可重用的组件(这是由于必须遵循的不一致或更复杂的视图)。

文件分离
您很可能会使用Sass或其他类似的预处理器。 在文件分离方面,有很多方法,但是我们采用的是以下一般结构:
- 常规-常规通常由设置代码组成,例如使网格工作,HTML标签的样式,重置/规范化器,某些CMS特定的样式等。
- 页面–如上所述的页面样式。 理想情况下,您应在此处保留很少的代码。
- 组件–构建的核心–各种组件都位于此处。 一个提示是,您可以拥有“元素”或“杂项”,它们会将较小的组件块放入一个文件中,而不是80个文件中。 当然,最好将较大的文件放在单独的文件中。
- 布局–全局样式,例如,在“页眉”,“页脚”,然后是页面布局,网格修改器等上。
- 插件–插件,扩展或任何其他外部生成的东西。 最好将它们分开,然后再在其他项目中重复使用它们。
保持选择器清洁
干净代码的一个好兆头就是它看起来多么简单。 没有怪异的属性,所有事物都有其目的,压痕低。 不必要时“寻找智能”选择器不会使您的代码“酷”。 如果您可以用.rel-something(假设这是一个有意义的类名)替换#container> .row div [rel =” something”]之类的东西,那么您应该稍微更新一下标记。 这样做的目的是使一切变得简单。
保持较低的缩进量。 您很少需要超过三个级别。 让我们来看一个.entry类:
.entry {...} .entry-title {...}
看到实际上没有必要在.entry中缩进.entry-title。 稍后,当您在文件下添加修饰符时,可以使用.entry-modifier {}和.entry-modifier .entry-title {}
使用这种方法,将来覆盖样式会更容易。 让我们看另一个常见的示例:您具有nav.site-nav> ul.list-menu> li.list-items * 5> a(emmet)的标记
现在,要进行样式设置,您所需要做的就是:
.site-nav {}-组件1 .list-menu {}-组件2 .list-menu .list-item {} .list-menu a {}
如果内部有更多组件,例如其他下拉列表,则可以将它们直接嵌套在.list-menu中。 当您可以具有两个级别的.list-menu .dropdown {}时,无需编写.site-nav .list-menu .list-item .dropdown {}
为修饰符写更多的抽象类名
这是为了可维护性。 您会在类似的帖子中找到一个常见的示例,而不是将颜色变量设置为$ red,而是将其设置为$ primary或$ secondary。
原因是当需要进行更改时,变量$ red将输出蓝色。 您想更改原色而不是红色更有意义,对吗?
其他类型的颜色和属性也一样。 假设您有分隔某些内容的行(例如<hr>标记)。 您将其命名为.line-dash,因为它是虚线。 很有道理。 但是,随之而来的是变化,它必须被点缀。 您是否将其重命名为.line-dotted? 这不是修饰符,这是组件。 代替此,您可以将其命名为.line-separator。 然后,如果要具体化,可以为.dotted或.dashed添加修饰符。 这种命名通常是在构建网站时花费最多的时间。
综上所述
有无数的好与坏做法。 获得更好结果的一种方法是定义规则并遵循规则。 很难提出这样的规则,因此一个好的建议是浏览网络,并尝试收集有关架构的所有可能信息,例如命名约定,良好实践,如何编写可维护的代码等。
产生好的代码需要很多时间和成千上万行代码。 在进行所有这些操作时,请始终问自己“该秤是否可以使用?”,“我可以重复使用它吗?”,“我覆盖得太多了吗?”,“这样命名是否有意义?” 您做得越多,您的决策就越优化,您的工作速度就会提高。
在良好的基础上进行投资将减少项目的来回往返,并且将来需要进行的任何更改都将更易于实现。