组织 CSS 时保持理智

在我担任前端开发人员期间，我看到和听到过很多有关 CSS 的抱怨。

我经常看到人们为了避免编写 CSS 代码而使用 Bootstrap、Materialize、Bulma、Tailwind 等 CSS 框架。虽然 CSS 框架可以成为很好的加速器，但通常需要扎实的 CSS 技能才能有效运用它们。也就是说，如果你不擅长 CSS，那么你很可能也不会擅长使用 CSS 框架。

无论是否使用框架，当遇到问题时，人们往往会不断添加 CSS 代码，直到找到可行的解决方案。本质上，他们遵循的是“打不开结？打很多结！”的开发方法。

不幸的是，过大的、不合适的结不可靠，而且会削弱绳子。

所以，别再做那种“看看哪个能坚持”的开发者了。我会教你如何在样式表中添加一些组织性，让你快速上手，无需费心。

为成功做好准备：重置 vs. 正常化

HTML 元素自带默认样式。可惜的是，其中很多样式都丑得吓人（比如表单输入元素）。

更糟糕的是，浏览器的默认样式还没有达到 100% 一致。这意味着某些元素在不同的浏览器上会显示不同的效果。

您甚至可能会在样式表中一遍又一遍地覆盖默认样式，以实现所需的外观或定位。不要落入这个陷阱。只需处理一次默认样式即可。

也就是说，有两个强大的预构建解决方案可用于驯服默认样式：重置和标准化。

注意：不要忘记在所有其他样式之前添加这些- 记住级联！

CSS 重置

CSS Reset本质上是核心选项。它会清除所有元素的所有样式，或多或少只是使它们在名称上有所不同。例如，<h1>看起来像标签。<p>

如果你需要从头开始，这是一个有效的解决方案，但通常不需要完全删除默认样式。如果这样做，你就得回去用更多的CSS<h1>重新把它弄得又大又粗了。

规范化 CSS

标准化 CSS是比重置更优雅的解决方案。它的目标是平衡不同浏览器之间的差异，解决默认样式最常见的问题，同时保留其余部分。

大多数 CSS 框架已经内置了规范化功能，因此如果您使用 Bootstrap、Materialize 等，则无需添加此功能。

快速简便的选择

这里还有第三个选项值得一提。如果你想快速完成任务，又不想使用框架，你可以用下面的方法消除大部分麻烦：

* {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box */
    /* border: 1px solid black */
}

如果您使用元素的默认填充和边距，最终会去除您通常需要稍后进行的所有微调整。（这*是一个用于选择所有元素的通配符选择器）

您可以选择添加一些box-sizing功能，以确保宽度/高度不会相加。这意味着，如果您将某个元素设置为500px，那么无论之后添加的 padding、margin 或 border 如何，它都将保持原来的大小。我通常不会这样做，但在进行像素级完美布局时，它可能会有所帮助。

注意：最后一点是调试 CSS 布局的🔥小技巧🔥。如果您想知道元素的大小或形状，添加边框可以快速显示其渲染方式。这会为所有元素添加边框，显示所有内容在页面上的布局方式。

编写良好的标记并“顺其自然”

CSS Zen Garden向我们展示了 CSS 对 HTML 进行样式设置的强大功能，无论其如何编写。

那句关于权力和责任的名言是什么……？ 🤔🕷

HTML 有一定的流程。它会从上到下读取和渲染，某些元素会block……inline等等。你对这种默认行为了解得越多，就越能更好地利用它，并且需要编写的 CSS 代码也就越少。

是的，CSS 确实可以做出令人惊叹的事情来改变标记的默认行为。但是，如果您在编写 HTML 时牢记最终目标，那么您最终会更少地使用 CSS 来使标记行为更加合理。

使用 Flexbox 和实用程序类掌握布局

元素的布局和定位可能是学习 CSS 时最大的难题。你想让某个元素位于某个特定位置，于是写了十行 CSS，几乎完美地定位了它。然后你又写了十行 CSS，但它却垂直偏离了中心，等等。

有一些工具和技巧可以大大减少您花在将元素放置在所需位置上的时间。

浮点数

在讨论弹性盒之前，我们先简单聊聊浮动。如果你还在使用浮动布局，请停止使用。弹性盒与老版本浏览器高度兼容，而且使用起来也更加方便。

浮动非常适合将文本环绕在元素周围，但对于布局来说却很糟糕。它们会破坏 HTML 的流畅性，并且需要使用clearfix hack 来恢复其后元素的流畅性。

（注：要查看这些示例的实际效果，请转至原始帖子）

这是一个简单的例子：

<div id="float-example">
    <img src="https://picsum.photos/200" id="floatImage"/>
    <!-- Let's say we want this blob of text to wrap around our example image -->
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies sem id ante ullamcorper, a commodo eros molestie. Phasellus leo justo, malesuada scelerisque ullamcorper et, finibus ut metus. Integer egestas tellus leo, et consectetur tortor bibendum at. Sed non imperdiet risus. Sed at metus mauris. Donec ullamcorper, nunc sit amet ullamcorper mattis, diam sapien viverra nisi, sit amet pretium ligula mi in est. Nulla finibus imperdiet fringilla. Proin fringilla augue et turpis placerat, sit amet commodo enim dictum. Vivamus viverra mollis augue, in fermentum odio placerat eu. Aenean porta tellus quis urna tristique sagittis.
</div>

#floatImage {
    /* 'float' makes the text wrap around the image, try 'right' */
    float: left;
    /* the rest of this is to better illustrate the wrapping effect */
    shape-outside: circle();
    border-radius: 100px;
    margin: 5px;
}

#float-example::after {
    /* Another gripe about floats is having to use a clearfix! */
    content: "";
    display: table;
    clear: both;
}

如果您删除一些 lorem 文本，并删除该 clearfix hack，您将看到浮动如何破坏页面的流程。

如果使用得当，浮动是一个很好的工具。然而，对于布局来说，你可能并不想使用浮动。

弹性盒子

Flexbox 是一款功能强大且简单的工具，可用于创建布局和定位元素。如果您从未听说过它，Wes Bos 有一个很棒的免费系列文章，名为“ Flexbox 是什么？ ”。如果您已经熟悉 Flexbox，也可以使用一个很棒的可视化速查表。

从概念上讲，弹性盒就是创建容器。因此，你创建一个弹性容器，display: flex然后每个直接子元素都会根据父容器元素以某种方式对齐。

它也是一个一维布局系统。每个容器都朝一个方向运行，要么水平flex-direction: row（默认），要么垂直（默认flex-direction: column）。容器内的子元素可以很容易地从这个方向居中/对齐。

为什么不是网格？

你绝对可以使用 Grid！CSS Grid 与 Flexbox 非常相似，但功能更强大。如果说 Flexbox 是一维布局系统，那么 Grid 就是二维布局。你几乎可以设置 CSS Grid 容器来实现任何你想要的效果。（如果你想要一门很棒的免费 CSS Grid 课程……没错，Wes Bos 的课程也能满足你的需求。）

那为什么要用 flexbox 呢？说实话，我喜欢它，因为它超级简单直接。它只做一件事，而且做得非常好。另外，你完全可以嵌套 flex 容器，并将它们组合成任何你需要的形式。

组件与实用程序类

因此，当谈到 CSS 的组织时，有两个阵营：组件和实用程序类。

成分

组件可以理解为 Bootstrap 组织其构建块的方式。“巨型电子屏幕”或“导航栏”等元素可能由应用于元素的一个类来表示，也可能由应用于元素内部的几个子类来表示。这里的做法是在 HTML 中使用较少的类名，巧妙地限定其范围/命名，并且通常使用少量的类来设置较大块的标记的样式。

命名此类类的一个流行约定是BEM。BEM 代表“块、元素、修饰符”，它本质上是一个类名系统，--用于__提高 CSS 的可重用性和可组合性。

这是一段 5 分钟的 BEM视频，可以帮助您快速了解。

问题是这会降低 CSS 的可复用性。你无法很好地将巨型电子屏幕样式应用到导航栏上。BEM 和智能命名只能帮你到这一步。

实用程序类

与组件化类相反的方法是实用类。这些类通常很小，只做一件事。例如，mx-autoapply margin-left: auto; margin-right: auto。

Bootstrap 和 Materialize 有一组实用程序类，如果您想要更多示例，Tailwind CSS 完全由实用程序类组成。

实用类的强大之处在于快速开发。如果你定义了足够多的实用类，那么在进行原型设计时几乎无需离开 HTML 文件。

这里的缺点是，您的 HTML 元素很快就会因 CSS 类而变得臃肿，并且用于定义组件的十个实用程序类的组合会导致大量重复的代码。

寻找平衡

根据我的经验，两种方法的结合是明智的选择。将少量全局工具类与较大的展示类相结合，用于标记块是最合理的。这样做还有一个额外的好处，那就是让你的标记更具可读性，因为你的组件类名（例如）card会列在布局类名（例如row或）旁边column。所以card row会告诉你这张卡片有一排子元素。

我们来看一些例子。我们先创建一个标准布局，从标题和一些导航链接开始。

这段 CSS 代码能帮我们做很多繁重的工作。首先，我们将使用CSS 变量创建一个全局调色板，然后定义布局类。

（注：要查看这些示例的实际效果，请转至原始帖子）

:root {
    --ex-black: #1C0F13;
    --ex-green-dark: #6E7E85;
    --ex-green-light: #B7CECE;
    --ex-purple-dark: #BBBAC6;
    --ex-purple-light: #E2E2E2
}
/* These are going to be our main, bread and butter layout classes */
.row, .column {
    display: flex;
    flex-wrap: wrap;
}
.column {
    flex-direction: column;
}
.container {
    max-width: 500px;
    margin: auto
}
/* These additional classes will be used to space/align content */
.center-x {
    justify-content: center;
}
.center-y {
    align-items: center
}
.split {
    justify-content: space-between
}

接下来我们将使用 BEM 为导航标题添加一些样式。

/* add some styles to prettify */
.header {
    background-color: var(--ex-black);
    padding: 10px 5px;
}
.header__logo {
    color: var(--ex-purple-light);
    margin: 0;
}
.header__link {
    color: var(--ex-purple-dark);
    margin: 0 5px;
}

<header class="header">
    <div class="container row split center-y">
        <h1 class="header__logo">Logo</h1>
        <div class="row">
            <p class="header__link">Link</p>
            <p class="header__link">Link</p>
            <p class="header__link">Link</p>
        </div>
    </div>
</header>

这让标题变得简单！

让我们更进一步，构建一个巨型电子显示屏/号召性用语，并加入一些文字：

.jumbotron__container {
    background-color: var(--ex-green-light);
}
.jumbotron {
    height: 300px;
    color: var(--ex-black);
}
.jumbotron__button {
    background-color: var(--ex-purple-light);
    border: 2px solid var(--ex-green-dark);
    border-radius: 4px;
    color: var(--ex-green-dark);
    transition: background-color 200ms, color 200ms
}
.jumbotron__button:hover {
    color: var(--ex-black);
    background-color: var(--ex-purple-dark);
    border: 2px solid var(--ex-black);
}
.ex-heading {
    text-align: center;
    margin: 24px 0;
    color: var(--ex-green-dark);
}
.ex-text {
    color: var(--ex-black);
    max-width: 200px;
}

<header class="header">
    <div class="container row split center-y">
        <h1 class="header__logo">Logo</h1>
        <div class="row">
            <p class="header__link">Link</p>
            <p class="header__link">Link</p>
            <p class="header__link">Link</p>
        </div>
    </div>
</header>
<main>
    <div class="jumbotron__container">
        <div class="jumbotron column center-x center-y">
            <h2>This is a moving message</h2>
            <p>And this is why you should click the button below</p>
            <button class="jumbotron__button">Call to Action</button>
        </div>
    </div>
    <h3 class="ex-heading">Read Stuff</h3>
    <section class="container row split">
        <p class="ex-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies sem id ante ullamcorper, a commodo eros molestie. Phasellus leo justo, malesuada scelerisque ullamcorper et, finibus ut metus. Integer egestas tellus leo, et consectetur tortor bibendum at.
        </p>
        <p class="ex-text">
            Sed non imperdiet risus. Sed at metus mauris. Donec ullamcorper, nunc sit amet ullamcorper mattis, diam sapien viverra nisi, sit amet pretium ligula mi in est. Nulla finibus imperdiet fringilla.
        </p>
    </section>
</main>

很酷吧？

作为 CSS 初学者，做这样的事情曾经花费我几个小时和更多的 CSS 行！

注意：如果您在移动设备上检查此布局，您会发现它无需任何额外工作即可实现响应式布局。flex-wrap如果空间不足，该属性会使子元素换行。通常，Flexbox 非常适合创建响应式布局。

临别感想

希望现在你已经体会到将一些组织原则应用于 CSS 的强大之处。稍加练习，你就能用几行代码完成一些令人惊叹的事情。

有问题？想评论？请在下方留言！告诉我你是如何组织 CSS 的！

最初发表于leewarrick.com/blog

喜欢这篇文章吗？请订阅我的新闻通讯

鏂囩珷鏉ユ簮锛�https://dev.to/leewarrickjr/staying-sane-while-organizing-css-52hc