如何才能写出更优秀的CSS代码-css代码教程( 二 ) _经验知识

这个途径可以使我们的代码结构化。并提升模块化和可重用性。现在让我们说一说什么是块、元素和修饰符。
块
你可以把块视为组件。如果需要搭建一个简单的房子。你会怎么去做？你需要一个窗户。一个屋顶。一扇门和有的墙壁。这些就是我们的块。它们具有本身的意义。
命名：块名：.block示例：.card、.form、.post、.user-navigation元素
接下来。你大概怎么样用乐高积木搭建一个窗口呢？可能有的积木就这样看起来像框架。如果你把四个这样的积木组装起来。就会获得一个漂亮的窗户。这些就是我们的元素。它们是块的一部分。它们对于建块必不可少。但是。在块外面的时候。它们便无用武之地。
命名：块名+ __ +元素名：.block__element示例：.postauthor、.postdate、.post__text修饰符
现在窗户已经建好了。但是你可能想要一个绿帽色或一个小窗户。这些我们称之为修饰符。它们是块或元素上的标志。它们用来变化行为。外貌等等。
命名：块名称或元素名称+ -- +修饰符名称：.block__element--修饰符。.块--修饰符示例：.post--important 。.post__btn--disabled小心事项
在使用 BEM 的时候。你可以用且就只能用类来命名。不可以用 ID 。不可以用标签。就只能用类。块和元素可以嵌入很多块和元素。但是它们一定是完整独立的。请记住：独立。所以如果你想将把一个按钮放在标题下的话。就不要在按钮上加边距。不然按钮就会与标题绑定。请改用工具类。是的。你的 html 文件会超负荷。但是不用担心。与 BEM 弄来的好处相比。这其实只是个小小的缺点。示例
以下是一个学习。你可以去你最热爱或经常在用的网址。之后跟着想想就这样看哪些是块、元素和修饰符。
比如。以下是我想象中的 Google 商店：

文章插图
现在认真想想哪些地方可以改进。与往常一样。你一定自己查询搜索、实验和构件。以便更好地满足你的要求。
融会贯通。下面的示例演示了 BEM 的功能（）。

文章插图

文章插图
团队 CSS 文件：7-1模式现在让我们来讲解怎么样团队 CSS 文件。这种部分可以真正帮助你提升事情效率。并帮助你马上寻找需要改写的 CSS 代码。
为此。让我们知道一下 7-1 模式。是不是从没有听过这种模式。
首先你一定遵守以下两条规则：
将任何内容分别编辑入7个不一样的文件夹中。将它们全部导入位置在于根级其他 main.scss 文件中。7 个文件夹：
base：你可以将任何的样板代码放入该文件夹中。对于这里的样板：每当开始一个新项目时。你需要编辑的任何CSS代码。比如：排版规则、动作漫画、工具程序（对于工具程序。我指的是margin-right-large、text-center、...等类）等等。components：这里指组件。这种文件夹包含任何用来构建页面的组件。比如按钮、表单、滑块、弹出窗口等等。layout：页面不一样部分用到的布局。也就是说：页眉、页脚、导航、分区、你自己的网格等等。pages：页面。一些页面可能有特殊的样式。与一般的处理方法不一样。那么你可以将它放入该文件夹。themes：主题。如果你的应用中有不一样的主题（黑暗模式、管理员等等）。那么可以将它们放入该文件夹。abstracts：抽象。你可以将任何函数和变量与混入（mixin）放在这里。简而言之。就是你任何的帮手。vendors：外部资源。应用或项目怎么可能没有外部的库呢？你可以将任何不依赖于你的文件都放入该文件夹。比如。你可以放入Font Awesome文件、Bootstrap和很多类似的东西。主文件
你需要将以上任何内容导入到该文件中。
@import abstracts/variables;
@import abstracts/functions;
@import base/reset;
@import base/typography;
@import base/utilities;
@import components/button;
@import components/form;
@import components/user-navigation;
@import layout/header;
@import layout/footer;
是不是认为以上内容有那么一点太多。一时非常难支持。这种架构适合于大型项目。而非小项目。下面我们讲解一种更加的适合小项目的做法。
首先。你不需要 vendors 文件夹。可以将任何外部 CSS 代码放在头部的link标签内。接下来。如果你的应用只有一个主题的话。可以省略 themes 文件夹。末尾。你可能不会有超级多的页面特殊的风味。所以也 pages 也没必须。好了。现在只剩下 4 个文件夹了。