如何能更好的写出CSS？分享web前端大佬资料总结( 二 ) _CSS

我们常常不知道如何命名。然而命名很重要。假如你正在构建某个应用，并且由于某种原因不得不将其搁置数月，那该怎么办？还有更糟的，假如有人想把项目拿回去，该怎么办？如果你的 CSS 代码没有恰当的命名，那么乍一看上去很难明白你在说什么。
BEM 可以帮助我们解决这个问题。BEM 是一种命名约定，是英文 Block Element Modifier（块元素修饰符）的缩写。
这种方法可以使我们的代码结构化，并提高模块化和可重用性。现在让我们说一说什么是块、元素和修饰符。
块
你可以把块视为组件。还记得你小时候玩过乐高积木吗？让我们回忆一下小时候。
如果需要建造一个简单的房子，你会怎么做？你需要一个窗户，一个屋顶，一扇门和一些墙壁。这些就是我们的块。它们有着本身的意义。

命名：块名：.block
示例：.card、.form、.post、.user-navigation

元素
接下来，你应该如何用你的乐高积木建造一个窗口呢？可能有些积木看起来像框架，如果你把四个这样的积木组装起来，就会得到一个漂亮的窗户。这些就是我们的元素。它们是块的一部分，它们对于建块必不可少。但是，在块外面的时候，它们便无用武之地。

命名：块名+ __ +元素名：.block__element
示例：.post__author、.post__date、.post__text

修饰符
现在窗户已经建好了，但是你可能想要一个绿色或一个小窗户。这些我们称之为修饰符。它们是块或元素上的标志，它们用于改变行为，外观等等。

命名：块名称或元素名称+ -- +修饰符名称：.block__element--修饰符， .块--修饰符
示例：.post--important ， .post__btn--disabled

注意事项

在使用 BEM 的时候，你可以用且只能用类来命名。不能用 ID ，不能用标签。只能用类。
块和元素可以嵌入其他块和元素，但是它们必须是完全独立的。请记住：独立。所以如果你想将把一个按钮放在标题下的话，就不要在按钮上加边距，否则按钮就会与标题绑定。请改用工具类。
是的，你的 html 文件会超负荷，但是不用担心，与 BEM 带来的好处相比，这只是个小小的缺点。

示例
以下是一个练习。你可以去你最喜欢或最常用的网站，然后想想看哪些是块、元素和修饰符。
例如，以下是我想象中的 google 商店：

文章插图

Google 商店
【如何能更好的写出CSS？分享web前端大佬资料总结】现在该你了。认真想想哪些地方可以改进。与往常一样，你必须自己搜索、实验和构件，以便更好地满足你的需求。
融会贯通
下面的示例演示了 BEM 的功能。

文章插图

BEM 的功能
写一个博文组件

文章插图

博文组件
写多个按钮
3. 组织 CSS 文件：7-1模式你还跟得上节奏吗？很好！现在让我们来介绍如何组织 CSS 文件。这个部分可以真正帮助你提高工作效率，并帮助你立刻找到需要修改的 CSS 代码。
为此，让我们了解一下 7-1 模式。你可能会想，我从未听过这种模式。相信我，这很简单。你必须遵守以下两条规则：