话不多说：写出好的CSS代码是一件很痛苦的事情。许多开发人员不想进行CSS开发。你可以告诉我做任何你想做的事，但忘记CSS。当我构建应用程序时，我对CSS从来没有任何兴趣。但你无法躲避它，对吗？我的意思是，我们都专注于用户体验，但现在不能忽视设计。项目刚开始的时候，一切都很好。您有一些CSS选择器，如.title、input、#app等，非常简单。但是随着应用程序变得越来越大，CSS变得越来越糟糕。你混淆了CSS选择器。你会发现自己写了类似div#app.listli.itema的东西。然后你一遍又一遍地写同样的代码。你最终将所有代码都放在文件的末尾，因为你不在乎，CSS很烂。结果你得到了500行无法维护的CSS代码。我自己也经常与CSS作斗争。今天的目的是：让你写出更好的CSS。我希望你回顾过去的项目并思考：天哪，我怎么能写出这样的东西？然而，您可能会想：好吧，您是对的，但是CSS框架呢？CSS框架是用来帮助我们编写更好的CSS代码的，不是吗？当然，但CSS框架也有一些缺点：它经常使用乏味的设计。CSS框架很难定制，更不用说超越框架了。您必须先学习如何使用它们，然后才能使用它们。既然你关注了这篇文章，你一定有自己的理由吧？好吧，事不宜迟，让我们开始学习如何编写更好的CSS代码。注意：本文不是关于如何设计漂亮的应用程序。这篇文章是关于如何编写可维护的CSS代码以及如何组织它的。1.SCSS将在下面的例子中使用SCSS。SCSS是一个CSS预处理器。它基本上是CSS的超集：它添加了一些很酷的功能，如变量、嵌套、导入和混合等。以下是我们将使用的一些功能。变量您可以在SCSS中使用变量。主要好处是可重用性。假设您的应用有一组颜色。主要颜色是蓝色。然后到处使用蓝色：按钮的背景色、标题和链接的颜色。蓝色无处不在。突然有一天，你不喜欢蓝色，开始喜欢绿色。如果没有变量：需要修改所有包含蓝色设置的代码。如果使用变量：只需要修改这个变量即可。嵌套您可以在SCSS中使用嵌套。那么下面的代码：可以写成：更具可读性，不是吗？您可以使用嵌套在更短的时间内编写复杂的选择器。分块和导入从可维护性和可读性的角度来看，您不能将所有代码保存在一个大文件中。这在试验或构建小型应用程序时很好，但在专业水平上……想都别想。幸运的是，有了SCSS，我们可以继续沿用这种做法。您可以通过使用前导下划线命名它们来创建分块文件：_animations.scss、_base.scss、_variables.scss等。至于导入，您可以使用@import指令。例如，你可以这样做：哈哈！你可能会想，你在这里犯了一个错误！应该是_animations.scss，而不是动画;)不。如果您使用这种命名方案，智能SCSS就会知道您指的是分块文件。这就是我们需要了解的关于变量、嵌套、分块和导入的全部内容。SCSS还有很多其他的特性：比如mix-ins、继承和其他指令（@for、@if等），这里就不一一介绍了。我数不清有多少次我在CSS类中使用了包罗万象的名称。例如：.button、.page-1、.page-2、.custom-input。我们常常不知道该说什么。但是命名很重要。如果您正在构建一个应用程序并且由于某种原因不得不将其搁置数月怎么办？更糟糕的是，如果有人想收回该项目怎么办？如果你的CSS代码没有正确命名，乍一看可能很难理解你在说什么。BEM可以帮助我们解决这个问题。BEM是一种命名约定，是英文BlockElementModifier的首字母缩写。这种方法使我们的代码保持结构化并提高模块化和可重用性。现在我们来谈谈什么是块、元素和修饰符。块您可以将块视为组件。还记得小时候玩过乐高积木吗？让我们回忆一下我们的童年。如果你需要建造一个简单的房子，你会怎么做？你需要一扇窗户、一个屋顶、一扇门和一些墙壁。这些是我们的街区。他们有自己的意义。命名：块名称：.block示例：.card、.form、.post、.user-navigationelements接下来，您应该如何用乐高积木搭建一个窗口？可能有看起来像框架的块，如果你组装四个这样的块，你会得到一个漂亮的窗户。这些是我们的元素。它们是区块的一部分，是构建区块所必需的。但是，它们在街区外时毫无用处。命名：块名+__+元素名：.block__element示例：.post__author,.post__date,.post__text修饰符现在窗口已构建，但您可能需要绿色或小窗口。这些我们称之为修饰符。它们是块或元素上的标志，用于更改行为、外观等。命名：块名或元素名+--+修饰符名字：.block__element--modifier,.block--modifier例子：.post--important,.post__btn--disabled注意事项使用BEM时，可以用andonly命名与类。没有ID，没有标签。只能使用类。块和元素可以嵌入其他块和元素，但它们必须是完全独立的。记住：要独立。所以如果要在title下面放一个button，千万不要在button上放margin，否则button会和title绑定。请改用实用程序类。是的，你的HTML文件会超载，但别担心，与BEM带来的好处相比，这只是一个小缺点。示例下面是一个练习。你可以去你最喜欢或最常用的网站，想想什么是块、元素和修饰符。例如，这是我对GoogleStore的想象：GoogleStore现在轮到您了。认真想想你可以改进的地方。与往常一样，您必须搜索、试验和构建自己以更好地满足您的需求。将它们放在一起下面的示例演示了BEM的功能。BEM的功能写一篇博文组件博文组件写多个按钮3.整理CSS文件：7-1模式你跟不上节奏吗？非常好！现在让我们介绍如何组织CSS文件。本节确实可以帮助您提高工作效率，并帮助您立即找到需要修改的CSS代码。为此，让我们看看7-1模式。您可能会想，我从未听说过这种模式。相信我，这非常简单。您必须遵循以下两条规则：将所有内容写在7个不同的文件夹中。将它们全部导入到根级别的main.scss文件中。就这样。7个文件夹：base：你可以把所有样板代码放在这个文件夹里。这里的样板文件，我的意思是：每次开始新项目时需要编写的所有CSS代码。例如：排版规则、动画、工具程序（对于工具程序，我指的是margin-right-large、text-center,...等）等等。components：这里指的是组件。此文件夹包含用于构建页面的所有组件，例如按钮、表单、滑块、弹出窗口等。布局：页面不同部分使用的布局，即：页眉、页脚、导航、部分、您自己的网格等。pages：页面。某些页面可能具有与平常不同的处理方式。然后你就可以把它放到那个文件夹里了。主题：主题。如果您的应用程序中有不同的主题（深色模式、管理员等），您可以将它们放在这个文件夹中。摘要：抽象。你可以把所有的函数和变量和混入放在这里。简而言之，您所有的帮手。供应商：外部资源。应用程序或项目怎么能没有外部库呢？您可以将所有不依赖于您的文件放入此文件夹中。例如，您可以放入FontAwesome文件、Bootstrap和其他类似的东西。主文件您需要将以上所有内容导入此文件。我知道您认为以上内容目前有点难以接受。这种架构适用于大型项目，不适合小型项目。下面我们介绍一种比较适合小项目的做法。首先，您不需要供应商文件夹。所有外部CSS代码都可以放在head中的link标签内。接下来，如果您的应用程序只有一个主题，则可以省略themes文件夹。最后，您可能不会有很多特定于页面的样式，因此页面也不是必需的。好了，现在只剩下4个文件夹了。然后，你有两个选择：你可以按照7-1模式组织CSS代码，然后你需要留下abstracts、components、layout和base文件夹。您想将所有分块文件和mail.css放在一个大文件夹中，那么您将得到以下结构：您可以选择任何您喜欢的。你可能会想：你说服了我！但是我该如何使用它呢？我的意思是，不支持scss文件的浏览器怎么办？说得好！这是我们的最后一步，我们现在将学习如何将SCSS编译为CSS。4.从SCSS到CSS首先，你需要Node.js和NPM（或Yarn）。我们将使用一个名为node-sass的包，它允许我们将.scss文件编译成.css文件。它的CLI（命令行界面）相当容易使用：它有几个选项，但我们只使用其中两个：-w：监视目录或文件。这意味着node-sasswaits一直在监视你的代码是否发生了变化，一旦发生变化，它会自动将其编译成CSS。这在开发时非常有用。--output-style：CSS文件的输出内容。它的值可以是：嵌套、展开、压缩、压缩。我们将使用它来构建您的CSS文件。如果您是一个好奇的人（我希望如此，因为开发人员应该很好奇！）然后在此处查看完整文档。现在我们知道要使用哪些工具了。剩下的工作就简单多了。只需按照以下步骤操作：创建项目：mkdirmy-app&&cdmy-appinit：npminit添加node-sass库：npminstallnode-sass--save-dev创建文件夹、index.html和main.scss文件：添加这些将脚本添加到package.json文件：将包含已编译CSS文件的链接添加到index.html文件的head标记中：就是这样，您就可以开始了！您可以在编程时运行npmrunwatch并在浏览器中打开index.html文件。如果你想缩小CSS，只需运行npmrunbuild。5.添加livereload您可能希望添加livereload以提高工作效率，而无需手动重新加载本地index.html文件。您可以按照以下简单步骤操作：安装live-server包：npminstall-glive-server。注意：它是一个全局包。将npm-run-all添加到项目依赖项中：npminstallnpm-run-all--save-dev:有了它我们可以同时运行多个脚本。将这些脚本添加到package.json：现在如果您运行npmrunstart，您可以立即看到代码更改。添加自动前缀我们已经设置了开发工具，太棒了！现在，让我们谈谈构建工具，特别是：Autoprefixer。它是一个解析CSS并使用这些值的工具（特别是postcss插件）为CSS规则的提供者添加前缀。事实上，在构建网站时，您可能会使用一些并非所有浏览器都完全支持的新功能。因此，providerschemes可以为这些功能提供支持。这里有一个例子：你可能会想，写起来太乏味了。这就是为什么我们需要自动前缀来帮助我们的CSS代码在不增加额外复杂性的情况下获得浏览器兼容性。那么我们如何更智能地构建CSS呢？将所有SCSS文件编译成一个主CSS文件。使用自动前缀为CSS文件添加前缀。压缩CSS文件还有最后几个步骤，请继续阅读，很快就结束了。添加两个依赖项，postcss-cli和autoprefixer：npminstallautoprefixerpostcss-cli--save-dev修改构建脚本并将这些脚本添加到`package.json:现在当你运行npmrunbuild时，你可以生成传递的MinifiedCSS添加了提供者前缀的代码！很棒，不是吗？但你知道什么更酷吗？这里有一个为你设置的代码库，帮助你快速入门：）如果你想知道我是如何在项目中应用这些技术的，请点击这里查看代码库和结果。希望你能通过这些例子得到更深入的理解。现在，您已准备好开始编写可维护、模块化和可重用的CSS代码。
