你是否做过多页面的大型网站或者其中一部分?如果你做过,你可能会意识到 CSS 架构不够强大所带来的恐惧。你可能还会研究如何编写可维护的 CSS。
由于我们的行业很棒,我们有很多推荐的解决方案。因为专家们的纷纷加入,于是我们有 BEM,OOCSS,SMACSS,Atomic Design 等许多选择。
现在,问题不是痛苦 “我不知道该怎么办”,而是: “有这么多的方法,我应该尝试哪个?”我是不是应该把所有的都用一遍,是不是只有一种方法才适合我,或者我是不是应该参考它们做一个自己的架构?。
我开始只用一种方法。然后,当我尝试不同的方法时,我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中,我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。
当我将不同的方法拼凑在一起以形成我自己的习惯时,我会寻找以下四个特点:
class
是否安全,会不会干扰其他 CSS。这是最重要的,特别是当我需要在短时间内进行修改时。我不想因为改变一处而破坏别的东西。class
放在这个伟大工程中的什么地方,以防止大脑过载。这样我就可以快速修改 style
,而不必在整个工程里前后引用。class
必须 尽可能少,因为看到一长串的 class
时我头很晕。在我的探索中,我发现 BEM 和 命名空间 符合我寻找的标准。
BEM 是我的方法的基础。如果你以前从未听说过 BEM,它代表 block
, element
和 modifier
。当你第一次接触它时,它看起来是那么的难看。
.block { /* styles */ } .block__element { /* styles */ } .block--modifier { /* styles */ }
当我第一次看见 BEM 的时候,我就很讨厌它,甚至没有给它一个机会。我不记得是什么驱使我尝试 BEM 的,但我现在深深的知道它有多么的强大。让我来完整地解释一下 BEM 是什么(当然,加入了我自己的理解)。
一个块就是一个组件。这有点抽象,所以让我们用示例来学习。
假设您正在建立一个联系表单。在这种情况下,这个表单可以是一个块。在 BEM 中,块被写为像 class
的名字一样,如下所示:
.form { /* styles */ }
BEM 使用 .form
而不是
.form__row { /* styles */ }
BEM 元素有两个优点 :
为了解释以上两点,考虑使用两个单独的 class
的替代方法(许多框架这么做的)。你可能会用这样的东西:
.form .row { /* styles */ }
如果你使用 BEM 元素,则可以使用优先级为 10 而不是 20 的的选择器来为 .form__row
提供样式。此外,你可以立即分辨出(不论是在 HTML 还是 CSS 中).form__row
是 .form__row
的子节点。
(顺便说一句,如果你还没有克服 __element
语法的丑陋,等到你使用第三方插件看到像蛇一样的 class
名的时候, 你就懂了 ??)
继续,有一件事你需要了解。永远不应该链式命名 BEM 元素。 如果你的 class
最终像这样 .form__row__input
,你做的事情是非常错误的。(我开始时这样做过,所以你也不要对自己感到太糟糕!??)。
有两种方法可以绕过长长的 BEM 链式命名。 他们是:
虽然 BEM 建议你将 BEM 元素写作 .block__element
,但它不会规定你的 HTML 应如何。所以,只要有意义的话,你可以把你的孙元素连在一起。
接下来是一个例子。在下面的代码中,你将看到 .article__header
是 .article
的子元素。.article__title
是 article
的孙元素(或者说是 .article__header
的子元素,如果你将它们同时表示为 .article
的子元素,就没有冲突,因为这个表单同时只有他们存在。
虽然这样有效,你也会遇到无意义的链接孙元素的情况。举个例子:
呃?
此时你需要创建新块来保存孙元素。
在上述情况下,你可以轻松地将 .comments__comment
拆为 .comments
和 .comment
:
这更有意义,不是吗?如果你这样做,请确保将 .comments
和 .comment
块放在同一个文件中,以方便参考。
不幸的是,有时候它不像 .comments__comment
那么简单。例如,假设在块中有一个列表元素。
-
如果你注意到,我已经链接了.block__item
,这是一个 .block
的孙元素。 将 .block__item
中的元素链接到 .block
没有意义,或可能最终会遇到一些糟糕的局面。
然而,同时由于它们被一起使用,所以为 .block__list
或 .block__item
创建一个新的块是没有意义的 。你会命名什么来保持在上下文中有意义?
在这种情况下,我一般会为 block__item
创建一个名为 .item
的伪块。看下面的HTML。
-
伪块,正如名字所示,是伪的。上面的 HTML 中没有 .item
的实际声明。但是,在.block__item
中有连接到 .item
的元素中。
在我的 CSS(Sass)中,我在 .block__item
中嵌套 .item
元素,赋予了它所需的上下文。
.block__item { .item__title { /* styles... */ } }
你可能会说,“但这是违反 BEM 惯例的!” 是的,但请阅读下一篇文章 。你会知道为什么我这样做??。
接下来,还有一件事,在我的用例中添加为 BEM 添加的 —— 容器。
有时(实际上经常),我会遇到这样的情况,我必须在确定其它元素都对齐的同时扩散一个区域的背景色,就像这样:
如果你熟悉构建布局,会使用以下方式构建 HTML :
问题是,你应该怎么命名块容器? 或者在这种情况下,怎么命名
block-container
。我只在这种情况下使用-container
,所以我觉得它仍然可以接受。你有更好的主意吗?(顺便说一下,看见.l-wrap
中的 .l-
了没,这是命名空间,我将在下一篇文章中分享更多的内容。
所以,这就是我简单地使用 BEM 的方法。如果你注意到我上面设置的标准,你会注意到我只考虑了两个方面:
class
的数量必须尽可能少 。class
放在这个伟大工程中的什么地方,以防止大脑过载。其他两个方面尚未考虑:
class
是否安全,会不会干扰其他 CSS。 联系客服