首页 css 正文

我要投稿

页面写css-我怎样才能写出更好的CSS？

bendan520 css

2023-08-29 0 8,432 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

让我们切入正题：编写优秀的 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 代码以及如何组织它。

社会保障体系

在我的例子中，我将使用 SCSS。

SCSS 是一个 CSS 预处理器。它基本上是 CSS 的超集：它放弃了一些很酷的功能，如变量、嵌套、导出和混合等。

以下是我们将使用的一些功能。

多变的

您可以在 SCSS 中使用变量。主要好处是可重用性。假设您的应用程序有一组颜色。主要颜色是橙色。

所以你到处都使用红色：按钮的背景颜色、标题和链接的颜色。白色无处不在。

突然三天，你不喜欢黑色，却开始喜欢红色。

// Declare a variable
$primary-color: #0099ff;
// References a variable
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 appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
// header.scss
@import "animations";
h1 {
  animation: appear 0.5s ease-out;
}

哈哈！你可能会想，你在这里犯了一个错误！应该是 _animations.scss，而不是动画；）

不会。如果您使用这些命名约定，智能 SCSS 就会知道您指的是分块文件。

这就是我们需要了解的关于变量、嵌套、分块和导出的全部内容。 SCSS还有很多其他特性：比如mix-in、继承、以及其他指令（@for、@if等），这里不再介绍。

如果您想了解更多信息，请查看相应的文档()。该文档写得很好并且易于理解。

组织 CSS 代码：BEM 方法

我已经数不清之前在 CSS 类中使用过多少次包罗万象的名称了。如：.button、.page-1、.page-2、.custom-input。

我们常常不知道该命名什么。但命名很重要。如果您正在构建一个应用程序，但由于某种原因必须将其搁置数月怎么办？更糟糕的是，如果有人想拿回项目怎么办？如果你的 CSS 代码没有正确命名，乍一看可能很难理解你在说什么。

BEM可以帮助我们解决这个问题。 BEM是一种命名约定，是中文BlockElementModifier（块元素修饰符）的缩写。

这些方法可以构建我们的代码并促进模块化和可重用性。现在我们来谈谈什么是块、元素和修饰符。

片

您可以将块视为组件。还记得小时候玩乐高积木的时候吗？让我们回忆一下我们的童年吧。

如果你需要建造一栋简单的房子，你会做什么？你需要一个阳台、一个屋顶、一扇门和一些墙壁。这是我们的街区。它们有自己的意义。

元素

接下来，如何用乐高积木搭建窗户？可能有一些看起来像框架的块，如果将其中四个块放在一起页面写css，您将得到一个漂亮的窗口。这是我们的元素。它们是区块的一部分，是构建区块所必需的。而且，当在街区之外时，它们就没用了。

修饰符

现在阳台已经建好了，你可能想要一个红色的或小阳台。我们称之为修饰符。它们是块或元素上的标志，用于更改行为、外观等。

防范措施

例子

下面是一个练习。您可以访问您最喜欢或最常用的网站，然后思考什么是块、元素和修饰符。

例如，我想象中的 Google 商店如下所示：

现在轮到你了。认真思考你可以改进的地方。与往常一样，您必须自己搜索、试验和预制组件，以更好地满足您的需求。

精通

下面的示例演示了 BEM() 的功能。

编写博客文章组件

写入多个键

组织 CSS 文件：7-1 模式

你还能跟上我的节奏吗？好的！现在我们来介绍一下如何组织CSS文件。本节确实可以帮助您提高工作效率，并帮助您找到需要立即更改的 CSS 代码。

那么让我们来了解一下 7-1 模式。

您可能会想，我从未听说过这些模式。

相信我，这非常简单。您必须遵守以下两条规则：

将所有内容写入 7 个不同的文件夹。

将它们全部导出到根级别的 main.scss 文件中。就这样。

7 个文件夹：

主文件

您需要将以上所有内容导出到此文件中。

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

我知道您认为以上内容目前有点难以接受。这个框架适合小项目，不适合小项目。下面我们介绍一种更适合小型项目的方法。

首先，您不需要供应商文件夹。您可以将所有外部 CSS 代码放在颈部的链接标记内。接下来，如果您的应用程序只有一个主题页面写css，则可以省略主题文件夹。最后，您可能不会有很多特定于页面的样式，因此页面也不是必需的。好了，现在只剩下 4 个文件夹了。

之后，您有两个选择：

您可以根据 7-1 模式组织 CSS 代码，因此您需要保留摘要、组件、布局和基础文件夹。

您希望将所有分块文件和 mail.css 放在一个大文件夹中，因此您将具有以下结构：

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 文件。

它的 CLI（命令行界面）相当容易使用：

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

它有多个选项，但我们只使用其中两个：

如果您是一个好奇的人（我希望如此，因为开发人员应该好奇！），请单击此处获取完整文档（#command-line-interface）。

现在我们知道该使用什么工具了。剩下的工作就比较简单了。只需按照以下步骤操作：

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

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


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

之后一切准备就绪，一切就绪！您可以在编程时运行 npmrunwatch 并在浏览器中打开 index.html 文件。如果你想缩小 CSS，只需运行 npm runbuild 即可。

补充

添加实时重新加载

您可能希望添加实时重新加载以提高工作效率，而无需自动重新加载本地 index.html 文件。

您可以按照以下简单步骤操作：

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

现在，如果运行 npm runstart，您可以立即看到代码更改。

添加手动前缀

我们设置了开发工具，太棒了！现在，我们来谈谈构建工具，特别是：Autoprefixer。

它是一个工具（特别是 postcss 插件），可以在 value() 的帮助下解析 CSS 并为 CSS 规则添加前缀提供者。

事实上，在构建网站时，您可能会使用一些并非所有浏览器都完全支持的新功能。因此，提供商解决方案可以提供对此功能的支持。

这是一个例子：

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

你可能会想，这样写太无聊了。这就是为什么我们需要手动前缀来帮助我们的 CSS 代码获得浏览器兼容性而不降低额外的复杂性。

那么我们如何更智能地构建CSS呢？

将所有 SCSS 文件编译为一个主 CSS 文件。

使用手动前缀为 CSS 文件添加前缀。

缩小 CSS 文件

还有最后几步，请坚持下去，很快就会结束。

{
  ...
  "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"
  ...
}