你是否做过多页面的大型网站或者其中一部分?如果你做过,你可能会意识到 CSS 架构不够强大所带来的恐惧。你可能还会研究如何编写可维护的 CSS。 由于我们的行业很棒,我们有很多推荐的解决方案。因为专家们的纷纷加入,于是我们有 BEM,OOCSS,SMACSS,Atomic Design 等许多选择。 现在,问题不是痛苦 “我不知道该怎么办”,而是: “有这么多的方法,我应该尝试哪个?”我是不是应该把所有的都用一遍,是不是只有一种方法才适合我,或者我是不是应该参考它们做一个自己的架构?。 我开始只用一种方法。然后,当我尝试不同的方法时,我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中,我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。 当我在寻找一个出色的 CSS 架构时我究竟在找什么当我将不同的方法拼凑在一起以形成我自己的习惯时,我会寻找以下四个特点:
在我的探索中,我发现 BEM 和 命名空间 符合我寻找的标准。 从 BEM 开始BEM 是我的方法的基础。如果你以前从未听说过 BEM,它代表 .block { /* styles */ } .block__element { /* styles */ } .block--modifier { /* styles */ } 当我第一次看见 BEM 的时候,我就很讨厌它,甚至没有给它一个机会。我不记得是什么驱使我尝试 BEM 的,但我现在深深的知道它有多么的强大。让我来完整地解释一下 BEM 是什么(当然,加入了我自己的理解)。 块一个块就是一个组件。这有点抽象,所以让我们用示例来学习。 假设您正在建立一个联系表单。在这种情况下,这个表单可以是一个块。在 BEM 中,块被写为像 .form { /* styles */ } BEM 使用 .form__row { /* styles */ } BEM 元素有两个优点 :
为了解释以上两点,考虑使用两个单独的
.form .row { /* styles */ } 如果你使用 BEM 元素,则可以使用优先级为 10 而不是 20 的的选择器来为 (顺便说一句,如果你还没有克服 继续,有一件事你需要了解。永远不应该链式命名 BEM 元素。 如果你的 有两种方法可以绕过长长的 BEM 链式命名。 他们是:
链接孙元素到块虽然 BEM 建议你将 BEM 元素写作 接下来是一个例子。在下面的代码中,你将看到
虽然这样有效,你也会遇到无意义的链接孙元素的情况。举个例子:
呃? 此时你需要创建新块来保存孙元素。 创建新的块来保存孙元素在上述情况下,你可以轻松地将
这更有意义,不是吗?如果你这样做,请确保将 不幸的是,有时候它不像
如果你注意到,我已经链接了 然而,同时由于它们被一起使用,所以为 在这种情况下,我一般会为 伪块,正如名字所示,是伪的。上面的 HTML 中没有 在我的 CSS(Sass)中,我在 .block__item { .item__title { /* styles... */ } } 你可能会说,“但这是违反 BEM 惯例的!” 是的,但请阅读下一篇文章 。你会知道为什么我这样做??。 接下来,还有一件事,在我的用例中添加为 BEM 添加的 —— 容器。 容器有时(实际上经常),我会遇到这样的情况,我必须在确定其它元素都对齐的同时扩散一个区域的背景色,就像这样: 浅灰色的背景扩散到了对齐的区域的外面 如果你熟悉构建布局,会使用以下方式构建 HTML :
问题是,你应该怎么命名块容器? 或者在这种情况下,怎么命名 block-container 。我只在这种情况下使用-container ,所以我觉得它仍然可以接受。你有更好的主意吗?(顺便说一下,看见 总结所以,这就是我简单地使用 BEM 的方法。如果你注意到我上面设置的标准,你会注意到我只考虑了两个方面:
其他两个方面尚未考虑:
|
|