Geekly articles weekly

我们写的CSS更好，更漂亮



老实说：编写好的CSS很难。
许多开发人员不喜欢编写CSS。 没什么，但是没有！ 不是CSS。

当您在开发应用程序时不得不处理CSS时，这并不是工作中最快乐的部分。 但这是无法避免的，对吧？ 今天，让用户满意应用程序的设计是如此重要，以至于没有CSS －什么也没有。

当该项目刚刚开始时，一切都会顺利进行。 您只有几个选择器： .title ， input和#app就像给#app一样容易。

但是随着应用程序的逐渐发展，查看CSS并不令人害怕：找出所有这些选择器并不容易。 您开始编写类似div#app .list li.item a ，一遍又一遍地重复一些代码，并将所有代码转储到文件末尾：您不在乎，因为CSS很烂。 结果是500行CSS代码无法支持。


是我在打CSS的时候

翻译成Alconost

我今天的挑战是教您如何更好地编写CSS。 我希望您看看旧项目并想： “天哪！ 你怎么写这个？”

但是CSS框架呢？ -你问。 毕竟，他们是为此发明的-编写出色的CSS代码。

对啊 但是它们有缺点：

  • 输出设计通常很无聊。
  • 进行必要的设置或超出框架的功能可能很困难。
  • 要使用框架，您首先需要研究它们。

好吧，您正在阅读本文-这意味着有原因吧？ 因此，事不宜迟，继续学习如何更好地编写CSS。

注意事项 本文不是关于如何创建漂亮的应用程序，而是关于如何编写支持的 CSS代码以及如何组织它。

SCSS


在示例中，我将使用SCSS 。

SCSS是CSS预处理器，本质上是CSS的超集，它添加了一些很酷的功能，例如变量，嵌套，导入和杂质（“ mixins”）。

接下来，我将告诉您我们将在这里利用哪些机会。

变数


SCSS具有变量，它们的主要优点是重用。 假设您有一个应用程序的调色板，并且原色是蓝色。

因此，到处都是蓝色：背景background-color按钮的background-color color标题，链接的color 。 蓝色-随处可见。

突然之间，您不喜欢它。 新的最爱是绿色。

  • 如果尚未使用变量，则必须更改所有带有蓝色的行。
  • 对于变量，只需更改其中一个的值即可。

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

套料


在SCSS中，可以使用嵌套。 因此从片段

 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</i> appear { 0% {  opacity: 0; } 100% {  opacity: 1; } } <i>// header.scss</i> <b>@import "animations";</b> h1 { animation: appear 0.5s ease-out; }

您可能会想到：“啊哈！ 他在这里有错！ 我们需要编写_animations.scss ，而不是animations 。”

不行 SCSS足够聪明，可以意识到这是部分文件。

这就是我们需要了解的有关变量，嵌套，部分文件和导入的全部信息。 SCSS还有其他可能性-杂质，继承和各种指令（ @for ， @if ，...），但是我在这里不赘述。

如果您有兴趣，请阅读文档 ：内容足够清楚且写得很好。

CSS排序：BEM方法论


我已经无数次地使用CSS类的通用名称。 好吧，您知道： .button .page-1 .page-2 .custom-input 。

通常，我们不知道要选择哪个名称-尽管命名是一项重要任务。 想象一下，您开始编写应用程序，然后决定将该业务推迟几个月-或更糟的是，有人接管了您的项目。 如果您不考虑CSS代码中的命名，将很难立即理解特定行中的含义。

BEM帮助解决此问题。 BEM是一个命名约定； 代表块，元素，修饰符。

这种方法将帮助您构建代码，使其更具模块化，并简化重用。 让我们看看“ block”，“ element”和“ modifier”的含义。

积木


块可以想象成一个组件。 以Lego构造函数为例。

如何用设计师制作简单的房子？ 它将需要一扇窗户，一个屋顶，一扇门，几堵墙-就是这样。 这正是我们的障碍 -它们本身具有意义。

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

物品


以及如何从设计师多维数据集制作一个窗口？ 您可以找到看起来像框架各部分的立方体，并从中组装出漂亮的窗户。 这些将是我们的要素 。 它们代表了块的必要部分，但在块之外本身是无用的。

命名：块名称+ __ +元素名称： .block__element
例如： .post__author, .post__date, .post__text

修饰符


因此，我们做了一个窗口。 现在我们需要一个绿色的窗口，例如一个小窗口。 这些将是我们的修饰符。 它们是块和元素上的标志，用于更改行为，外观等。

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

注意事项


  • BEM表示仅命名类 。 不是标识符，也不是标签-只是类 。
  • 块和元素可以嵌套在其他块和元素中，但是它们必须完全独立。 必须独立 。 因此，不必在按钮上添加字段，使其位于标题下方，否则它将附加到标题。 更好地使用辅助类。
  • 是的，HTML文件将被重载，但并不令人恐惧：BEM的优点胜于此缺点。

例子


读者的一些练习。 转到您经常访问的站点，并考虑可能存在哪些块，元素和修饰符。

例如，我可以想象一下Google商店中的此类图片：



现在轮到您了。 好奇并思考可以做得更好的事情。 当然，要提高自己的技能，您需要独立地搜索，试验和编写代码。

组织CSS文件：7-1原理


我还不累你吗？ 太好了！ 让我们弄清楚如何组织CSS文件。 这将大大提高工作效率，并帮助您立即找到需要修复的CSS代码。

现在该熟悉“ 7-1”的原理了。
这些数字什么都没告诉你，对吧？

但是，一切都很简单。 要遵循两个规则：

  1. 将部分文件放在7个文件夹中。
  2. 将它们全部导入到位于根目录下的一个main.scss文件中。 仅此而已。

七个文件夹：


  • base文件夹是在启动新项目时编写的CSS模板代码。 这些可以是布局规则，动画，辅助类（例如， margin-right-large ， text-center等）。
  • components文件夹-用于形成页面的所有组件：按钮，表单，页面模块-“刷卡器”，弹出窗口等。
  • layout文件夹-用于页面各部分的布局，即页眉，页脚，导航，部分，自定义网格等。
  • pages文件夹用于需要与标准不同的单独样式的页面。
  • themes文件夹-用于各种应用程序主题（暗模式，管理等）。
  • abstracts文件夹-所有函数，变量和杂质。 简而言之，辅助的东西。
  • vendors文件夹是一个外部库，没有这个库，也许一个应用程序都做不到。 vendors文件夹中包含与您无关的文件：超赞字体，引导文件等。

主文件


所有部分文件均导入此处。

 @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文件夹：一个小型应用程序很可能只有一个主题。 最后，特定页面将没有样式-因此我们删除了相应的文件夹。 因此，剩下四个文件夹-太好了！

现在我们有两个选择：

  1. 如果遵循“ 7-1”的原则，则需要保存abstracts ， components ， layout和base文件夹。
  2. 如果您更喜欢使用其中包含所有部分文件和main.scss的大文件夹，则会得到以下内容：

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


由您决定。

我说服了！ 如何应用所有这些？ 我的意思是，浏览器不支持scss文件，对不对？

确实要注意！ 在最后一步，我们将SCSS编译成CSS。

用SCSS制作CSS


我们将需要Node.js和NPM （或Yarn ）。

我们将使用node-sass ，这将使我们可以将.scss文件编译为.css 。

它的界面非常简单：

 node-sass <> <> []

我们将仅使用两个参数：
  • -w -监视目录或文件。 node-sass将等待代码中的更改，并且一旦检测到它们，便会立即在CSS中编译相应的文件，这在开发过程中非常方便。
  • 参数--output-style输出CSS文件的外观。 它可以采用以下值： nested|expanded|compact|compressed 。 在构建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" }, … }

  • 将已编译的CSS文件的链接添加到index.html文件的head标记中：

 <!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"> <b><link rel="stylesheet" href="css/style.css"></b> <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": { <b>   "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",</b>  "watch": "node-sass sass/main.scss css/style.css -w", }, … }

现在，如果您启动npm run start ，更改将立即显示-您无需进行任何不必要的移动。

自动前缀


我们设置了开发工具-太好了！ 现在，让我们特别讨论构建工具-Autoprefixer 。
该工具（或更确切地说是postcss插件）使用“ 我可以使用”中的值来解析CSS并为CSS规则添加供应商前缀。

创建网站时，可能会使用并非所有浏览器都支持的新功能。 提供对此类功能的支持，允许供应商添加前缀。

有关其外观的示例：

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

是的，手工书写很乏味。 为我们提供便利的工具是一种自动添加前缀的工具，该前缀将使CSS代码与浏览器兼容，而无需付出任何额外的努力。

因此，要编译CSS：

  1. 我们将所有SCSS文件编译为一个CSS文件。
  2. 使用自动前缀添加前缀。
  3. 压缩CSS文件。

没什么了-不要切换频道。

  • 添加两个依赖项postcss-cli和autoprefixer ： npm install autoprefixer postcss-cli --save-dev
  • 我们修改build脚本，并将这些行添加到package.json ：

 { … "scripts": {  "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",  "watch": "node-sass sass/main.scss css/style.css -w", <b>   "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"</b> … }

现在，当您启动npm run build ，将添加提供者前缀， 并且 CSS代码本身将被压缩。 只是魔术！

您还想要更多魔术吗？ 我提出了资源库 -这样您就可以更快地找到它？

如果您对我如何将这些技能应用于我的投资组合页面感兴趣，请查看此存储库并享受结果 。 我希望这些示例将有助于更好地理解本文中讨论的内容。

而且...今天就这些！ 现在，您可以编写可重用的受支持的模块化CSS代码。



关于翻译

这篇文章由Alconost翻译。

Alconost以68种语言本地化游戏 ， 应用程序和网站 。 母语翻译，语言测试，带有API的云平台，持续本地化，24/7项目经理，任何格式的字符串资源。

我们还制作广告和培训视频 -适用于销售，图像，广告，培训，预告片，专家，Google Play和App Store的预告片的网站。

更多细节

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

More articles:


All Articles