Geekly articles weekly

开发网页样式的方法和工具

让我们面对现实吧：编写好的CSS代码的过程可能非常非常困难。 许多开发人员不想弄乱样式。 他们准备做任何事情，但不准备CSS。



该材料的作者（我们今天将引起您的翻译）说他本人不喜欢与CSS相关的Web开发部分。 但是没有解决的办法。 如今，人们对设计和所谓的“用户体验”给予了极大的关注，但是如果没有CSS，您将无可避免。 本材料的目的是帮助所有人提高开发和应用网页样式的技能。

CSS问题


在新项目的开始阶段，样式通常看起来很简单明了。 假设只有很少的CSS选择器，例如.title ， input和#app ，使用起来并不难。

但是，随着应用程序的增长，样式变成了噩梦。 开发人员开始对CSS选择器感到困惑。 他发现自己编写了类似div#app .list li.item a 。 但是，工作无法停止，因此程序员继续使用类似的构造，将CSS代码推送到文件末尾的某个位置。 真的-谁对样式感兴趣？ CSS本身就是胡说八道...结果是500行完全不受支持的可怕CSS。

我希望您阅读这篇文章，看一下您以前的项目，然后思考：“嗯，哇，我怎么写这个？”

也许您现在正在考虑“编写CSS”意味着使用CSS框架。 毕竟，它们的目的是精确地促进样式的工作，并且正是由于它们的使用，他们编写了良好的CSS代码。 所有这些都是正确的，但是CSS框架具有某些缺点：

  • 通常，它们的使用会导致无聊，单调，平庸的外观。
  • 自定义框架的样式很困难，并且需要做一些超出框架范围的事情，这可能会造成困难。
  • 在使用框架之前，必须先对其进行研究。

而且，最后，您不是为了熟悉某个框架而不是阅读本文吗？ 因此，让我们完成CSS。 我想立即指出，材料不是关于如何为应用程序创建美观的设计。 它与如何编写易于维护的高质量CSS以及如何正确组织CSS有关。

SCSS


在我的示例中，我将使用SCSS 。 这是一个CSS预处理器。 实际上，SCSS是CSS的超集。 它具有一些非常有趣的功能，例如变量，嵌套结构，文件导入，mixins。 我们将讨论我们将使用的SCSS功能。

▍变量


在SCSS中，可以使用变量。 使用变量的主要优点是可以重用它们。 想象一下，我们为应用程序提供了一组颜色。 主要颜色是蓝色。 结果，这种颜色几乎可以应用到任何地方。 它在按钮的background-color属性，页面标题的color属性以及许多其他地方使用。

然后，突然，您决定将蓝色更改为绿色。 如果在不使用变量的情况下执行此类替换，则必须编辑所有代码，以及所有使用旧颜色的行。 如果使用变量，则只需更改其值。 变量的用法如下所示：

 //   $primary-color: #0099ff; //   h1 { color: $primary-color; }

▍嵌套结构


SCSS支持嵌套构造。 这是普通的CSS：

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; }

由于嵌套结构的支持，它可以按以下方式进行转换：

 h1 { font-size: 5rem; color: blue; span {   color: green; } }

这个选项更容易阅读，对吧？ 此外，通过使用嵌套结构，可以减少创建复杂选择器的时间。

▍碎片和导入


当涉及到支持样式及其可读性时，很明显不可能将所有代码都保存在一个文件中。 一个样式文件可以用于实验目的，也可以在开发小型应用程序时使用，但是如果您是专业人士，则最好不要尝试。 对我们来说幸运的是，SCSS具有适当的机制来方便地组织样式代码。

可以通过在名称的开头添加下划线来创建包含样式说明片段的文件： _animations.scss ， _base.scss ， _variables.scss等。

@import指令用于导入这些文件。 这是使用这种机制的方法：

 //  _animations.scss @keyframes appear { 0% {   opacity: 0; } 100% {   opacity: 1; } } //  header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; }

您可能会发现此代码中有错误。 实际上，我们要导入的文件称为_animations.scss ，在header.scss文件中，我们使用@import "animations"命令。 但是，没有错。 SCSS是一个足够聪明的系统，可以理解在这种情况下，开发人员需要相应的文件。

这就是我们需要了解的有关变量，嵌套结构，样式碎片和导入的所有信息。 SCSS中还有其他可能性，例如mixins，继承和其他指令（其中包括@for ， @if和其他一些指令），但是我们在这里不再讨论。

如果您想更好地了解SCSS，请查看相关文档 。

CSS组织：BEM方法论


我不记得我有几次使用通用术语来命名CSS类。 因此，我想每个人都熟悉这样的名称： .button ， .button .page-1 ， .custom-input .page-2 ， .custom-input 。

通常，我们只是根本不知道如何命名某些实体。 但这很重要。 如果您正在开发应用程序，然后由于某种原因将工作推迟了几个月该怎么办？ 或者，更糟糕的是，如果其他人承担了这个项目怎么办？ 如果CSS代码使用了不合适的名称，那么不分析应用程序的其他部分将很难理解。

BEM方法（块，元素，修饰符）是Web开发的一种组件方法。 特别是，这是一个实体命名约定。 这种方法使您可以构建代码，帮助将代码分解为模块并帮助其重用。 让我们谈谈块，元素和修饰符。

s积木


块可以视为组件。 当然，您在小时候玩过乐高游戏。 因此，请打开时间机器。

例如，您是如何建造普通房屋的？ 在这里，您将需要一个窗户，屋顶，门，墙壁，通常，这就足够了。 所有这些都是我们的障碍。 它们本身很重要。

命名：块名称.block

示例： .card ， .form ， .post ， .user-navigation

▍元素


如何制作一个乐高窗户？ 可能某些多维数据集看起来像框架，因此，如果连接这些多维数据集中的四个，则会得到一个漂亮的窗口。 这些是要素。 它们是块的一部分，我们需要它们才能创建块。 但是，块之外的元素是无用的。

命名： + __ + .block__element

范例： .post__author ， .post__date ， .post__text

▍修饰符


拥有一个窗口后，您可能想要更改它。 例如-用其他颜色绘画。 使用修饰符对基本块或元素进行此类更改。 这些是块或元素的标志，它们用于更改其行为，外观等。

命名： + -- + .block__element--modifier ， .block__element--modifier .block--modifier
例如： .post__btn--disabled .post--important ， .post__btn--disabled

▍注意事项


  • 使用BEM时，名称仅授予类。 没有ID或标签，只有类。
  • 块或元素可以嵌套在其他块或元素中，但是它们必须完全独立。 这很重要。 因此，例如，您不需要将字段分配给按钮，因为您要将其放置在标题下，否则按钮将与标题相关联。 请改用辅助类。
  • 当应用BEM方法时，HTML文件将带有名称重载，但这对于BEM为我们提供的功能来说是很小的一笔费用。

▍运动


这是一个练习。 仔细查看您喜欢的站点或您最常使用的站点，并考虑哪些可能是对它们的阻碍，什么是元素以及什么是修饰符。

例如，这是我通过分析Google Store得到的。


现场分析

现在轮到您了。 查看该站点，考虑如何对其进行改进。 为了在某​​个领域发展，一个人需要独立地寻求信息，进行实验并创造一些新事物。

▍例子


这是Codepen准备的示例，演示了BEM的功能。 在这里，我们做出一些类似在某个博客中发布的内容。 这是此示例的HTML。

 <div class="post"> <span class="post__author">Thomas</span>     <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span>     <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div>

以下是SCSS样式：

 .post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important {   background-color: yellow; } &__author {   font-size: 1.2rem;   font-weight: bold;   color: blue; } &__date {   float: right; } &__text {   line-height: 2rem;   font-size: 1.3rem; } } .mt-large { margin-top: 3rem; }

但是最终发生了什么。


使用BEM进行“发布”

考虑另一个例子 。 在这里，我们使用BEM来确定按钮。 这是此示例的HTML。

 <div> <button class="btn">   Click me </button> <button class="btn btn--danger">   Danger </button> <button class="btn btn--success">   Success </button> <button class="btn btn--small">   Small </button> <button class="btn btn--big">   Big </button> <button class="btn btn--border">   Border </button> </div>

这是SCSS样式。

 .colors { font-size: 1.5rem; font-family: sans-serif; } .btn {   background-color: #FF6B93;   color: #fff;   text-transform: uppercase;   padding: 1.5rem 2.5rem;   border-radius: 4px;   transition: all .2s;   font-size: 1.3rem;   border: none;   letter-spacing: 2px;   cursor: pointer; &:hover {   background-color: #D15879; } &:focus {   outline: none; } &--danger {   background-color: #FF3B1A;     &:hover {     background-color: #D43116;   } } &--success {   background-color: #00D123;     &:hover {     background-color: #00AB1D;   } } &--small {   padding: 1rem 2rem;   font-size: 1rem; } &--big {   padding: 1.8rem 4.5rem;   font-size: 1.7rem; } &--border {   background-color: #fff;   color: #FF6B93;   border: 1px solid #FF6B93;     &:hover {     background-color: #FF6B93;     color: #fff;   } } }

这就是结果。


使用BEM方法论的按钮设计

组织CSS文件：7-1模板


让我们谈谈组织CSS文件。 您从我们在对话的这一部分中学到的知识将使您的工作效率更高，并在适当的情况下帮助您立即找到需要更改的CSS代码。 为了实现所有这些，我们需要研究模板“ 7-1”。

也许现在在您看来，此模板的名称有些奇怪。 但是，这里没有什么奇怪的，使用它非常简单。 为此，只需遵守两个简单规则：

  1. 所有带有SCSS片段的文件都必须放在7个不同的文件夹中。
  2. 所有这些文件必须导入一个文件main.scss ，该文件位于所有这些文件夹所在的根目录中。

结果，模板的名称可以解密为“ 7个文件夹-1个文件”。 如您所见，这并不困难。 让我们更详细地讨论这个模板。

▍7个文件夹


这是有问题的文件夹：

  1. base ：在这个文件夹中，您需要放置所有的模板代码。 这里的“模板”代码是指创建新项目时必须编写的所有CSS代码。 例如：印刷规则，动画，实用程序（即margin-right-large ， text-center类的类）等。
  2. components ：此文件夹的名称清楚地表明了将在其中存储的内容。 我们正在谈论用于构建页面的组件的样式。 这些是按钮，表单，各种滑块，弹出窗口等。
  3. layout ：此文件夹用于存储页面布局元素的样式。 这是页面的页眉和页脚，导航区域，页面的各个部分，网格等。
  4. pages ：有时项目需要具有自己特定样式的页面，该样式不同于其他页面的样式。 此类特殊页面的样式描述在此文件夹中。
  5. themes ：如果一个Web项目涉及使用不同的主题（例如，“暗模式”或“ admin”之类的东西），则应在此处放置它们的样式。
  6. abstracts ：各种辅助内容都可以进入此文件夹-函数，变量，mixin。
  7. vendors ：一个没有外部依赖性的罕见站点。 此文件夹包含不是由开发特定网站的人创建的样式。 例如，在这里，您可以保存Font Awesome项目文件，Bootstrap样式等。

▍文件main.scss


在此文件中，导入了上述七个文件夹中排列的所有样式片段。 该文件的某些内容可能如下所示：

 @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;

我不同意七个文件夹的整个设计看起来很大的事实。 但是，应注意，此体系结构是为大型项目设计的。 对于小型项目，可以使用模板“ 7-1”的改编版本。 此版本的功能是无需某些文件夹即可完成此操作。 因此，在这里您可以通过在link标签中放置指向项目外部样式表的链接来拒绝vendors文件夹。 此外，您可以没有themes文件夹，因为主题可能不会在小型Web应用程序中使用。 最后，您可以摆脱pages文件夹，因为在此项目中，最有可能不会出现样式与一般样式非常不同的页面。 结果，在七个文件夹中，仅剩下四个。

此外，做一个小项目，您可以采用以下两种方法之一：

  • 如果您喜欢使用“ 7-1”模板的其余部分，则可以保存abstracts ， components ， layout和base文件夹。
  • 如果决定使用一个大文件夹，则所有带有样式片段的文件以及main.scss文件都将落入该文件夹。 它可能看起来像这样：

 sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss

究竟要选择什么取决于您的喜好。

在这里，如果您受到使用SCSS的想法的启发，则可能对使用此类样式有疑问，因为浏览器不支持它们。 实际上，这是一个很好的问题，它使我们进入了对话的最后阶段，即将SCSS编译为CSS。

将SCSS编译为CSS


为了将SCSS代码转换为CSS，您将需要Node.js平台和NPM （或Yarn ）程序包管理器。

我们将使用node-sass ，该node-sass允许我们将.scss文件编译为.css文件。 这是一个命令行工具，易于使用。 即， node-sass如下所示：

 node-sass <input> <output> [options]

这里有许多选项。 我们将重点关注两个：

  • -w选项使您可以监视文件夹或文件。 也就是说， node-sass将跟踪代码中的更改，并在发生更改时自动在CSS中编译文件。 此功能在开发过程中非常有用。
  • 选项--output-style确定输出CSS文件的样式。 这里有几个选项： nested ， expanded ， compact ， compressed 。 我们将使用此选项来构建完成的CSS文件。

如果您是一个好奇的人（我希望是这样，因为好奇心仅是为了开发人员的利益），那么您很可能会对查看node-sass的文档感兴趣。

因此，我们决定使用这些工具，现在最简单的事情仍然存在。 为了将SCSS转换为CSS，您需要执行以下步骤：

创建一个项目文件夹并转到它：

 mkdir my-app && cd my-app

初始化项目：

 npm init

将node-sass包添加到项目中：

 npm install node-sass --save-dev

创建一个index.html文件，样式文件夹， main.scss文件：

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss

将以下内容添加到package.json文件：

 { ... "scripts": {   "watch": "node-sass sass/main.scss css/style.css -w",   "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, ... }

在index.html文件的head标签中添加指向已编译CSS文件的链接：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html>

仅此而已。 既然您正在处理项目，请运行npm run watch并在浏览器中打开index.html文件。 要缩小CSS，请运行npm run build 。

其他实用程序


▍互动页面重新加载


您可能需要组织交互式页面重新加载以提高生产率。 这比手动重新加载index.html更方便。 方法如下：

安装live-server软件包（请注意，它是全局安装的）：

 npm install -g live-server

根据项目添加npm-run-all软件包，该软件包允许您同时运行多个脚本：

 npm install npm-run-all --save-dev

将以下内容添加到package.json ：

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w", }, ... }

现在，执行npm run start命令后，您在处理项目的过程中，将立即看到对其所做的更改，而无需手动重新加载页面。

pre自动前缀程序包


在此阶段，您拥有一个定制的开发环境，这非常好。 现在，让我们讨论用于构建项目的工具，尤其是关于autoprefixer软件包。 这是一个工具（我们正在谈论一个postcss插件），该工具可以解析CSS代码，并使用Can I Use中的数据向CSS规则添加浏览器供应商前缀。

在创建网站的过程中，程序员可以使用一些并非所有浏览器都完全支持的新功能。 浏览器前缀旨在解决许多问题，包括跨浏览器Web应用程序的开发。

带有浏览器前缀的代码如下所示：

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation;

很容易注意到，编写这样的代码非常繁琐。 为了简化确保CSS代码与各种浏览器兼容的任务，而又不使项目复杂化，我们将使用autoprefixer程序包。 在这里，您将需要执行以下步骤：

  • 我们将所有SCSS文件编译为一个主CSS文件。
  • 使用autoprefixer将浏览器前缀添加到此文件。
  • 压缩此CSS文件。

通常，这是该项目工作的最后阶段。 因此，这是使用autoprefixer所需要做的：

向项目添加两个依赖项postcss-cli和autoprefixer ：

 npm install autoprefixer postcss-cli --save-dev

将以下代码添加到package.json并修改build脚本：

 { ... "scripts": {   "start": "npm-run-all --parallel liveserver watch",   "liveserver": "live-server",   "watch": "node-sass sass/main.scss css/style.css -w",   "compile": "node-sass sass/main.scss css/style.css",   "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",   "compress": "node-sass css/style.css css/style.css --output-style compressed",   "build": "npm-run-all compile prefix compress" ... }

npm run build , CSS-, . , , . — , , .

, ,

总结


, CSS, , , CSS-, , .

亲爱的读者们！ -?

Source: https://habr.com/ru/post/zh-CN418825/

More articles:


All Articles