关于前端:5个需要避免的CSS错误

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

正如咱们明天所知，CSS 语言是 web 的一个重要组成部分。它使咱们有能力绘制元素在屏幕、网页或其余媒体中的展现形式。

它简略、弱小，而且是申明式的。咱们能够很容易地实现简单的事件，如暗黑 / 光明模式。然而，对它有很多误会和谬误的应用。这些会把 CSS 标记变成简单的不可读且不可扩大的代码。

咱们如何能力避免这种状况的产生？通过遵循最佳实际，防止最常见的谬误。在这篇文章中，咱们将总结出 5 个最常见的谬误以及如何防止它们。

不通过思考，立马入手，这样可能会更快的实现工作，这也给了咱们一种速度和成就感。但，从久远来看，这会有相同的成果。

在写代码之前，必须要先想分明。咱们将采取什么形式来设计组件？咱们想以原子的形式建设咱们的组件吗？咱们是否违心创立一个可组合的实用零碎？咱们想要一个曾经内置的 UI 库吗？咱们心愿咱们的 CSS 是全局作用域的还是按组件作用域的？

有一个明确的指标将帮忙咱们抉择最好的工具。这将使咱们免于冗余和违反 DRY。 有许多无效的办法来设计一个应用程序。最常见的有效的是即兴创作。

咱们的代码必须是可预测的，易于扩大和保护。

看个例子：

/* ❌ 到处增加离散值 */
.card {
  color: #edb361;
  background-color: #274530;
  padding: 1rem;
}

/* ✅ 定义基于主题的属性 */
:root {
  --primary-bg-color: #274530;
  --accent-text-color: #edb361;
  --spacing-unit: 0.5;
}

.card {color: var(--accent-text-color);
  background-color: var(--primary-bg-color);
  padding: calc(var(--spacing-unit) * 2rem);
}

在下面的例子中，咱们能够看到当应用 CSS 变量进行主题设计时，所有都变得可读和清晰。第一个 .card 定义看起来齐全是随机的，这个组件不容易被扩大。

Code Smell 中文译名个别为“代码异味”，或“代码滋味”，它是提醒代码中某个中央存在谬误的一个暗示，开发人员能够通过这种 smell（异味）在代码中追捕到问题。

Code smells 不是 bug。它们也不会障碍零碎的失常工作。它们只是一些不好的做法，会使咱们的代码更难浏览和保护。

在这里，列举一些最常见的以及如何克服它们：

在伪元素和伪类中应用 :: 符号是很常见的。这是旧的 CSS 标准的一部分，浏览器持续反对它作为一种回退。然而，咱们应该在伪元素中应用 ::，比方 ::before, ::after, ::frist-line…，在伪类中应用:，比方:link, :visited, :first-child…

应用 Sass 预处理器来帮忙解决咱们的 CSS 代码库是十分风行的。有时在尝试 DRY 时，咱们通过连贯 & 操作符来创立类。

.card {
  border: 0.5 solid rem #fff;
  
  /* ❌ failed attempt to be dry */
  &-selected {border-color: #000;}
}

在开发人员试图在代码库中搜寻 .card-selected 类之前，仿佛没有什么问题。开发者将很难找到这个类。

CSS 的简写十分好，能够让咱们防止代码过于简短。然而，有时咱们并没有刻意地应用它们。大多数状况下，background 简写是偶尔应用的。

/* ❌ 因为咱们只是在设置一个属性，所以不须要应用简写。*/
.foo {background: #274530;}

/* ✅ 应用正确的 CSS 属性 */
.foo {background-color: #274530;}

!important 规定用于笼罩特定性规定。它的应用次要集中在笼罩一个不能以任何其余形式笼罩的款式。

它通常用于更具体的选择器能够实现工作的场景。

<div class="inner">
  <p>This text is in the inner div.</p>
</div>


<style>
  .inner {color: blue;}
  
  /* ❌ 重写 color */
  .inner {color: orange !important;}
</style>


<style>
  .inner {color: blue;}
  
  /* ✅ 应用一个更具体的选择器规定，该规定将优先于更个别的规定。*/
  .inner p {color: orange;}
</style>

在 CSS 代码库中呈现一个神奇的数字是很常见的。它们带来了相当多的凌乱。有时，咱们可能会在代码中发现长的数字，因为开发者是为了笼罩一个他不确定的属性。

/* ❌ Brute 强制使这个元素位于 z 轴的最后面 */
.modal-confirm-dialog {z-index: 9999999;}

/* ✅ 提前打算并定义所有可能的用例 */
.modal-confirm-dialog {z-index: var(--z-index-modal-type);
}

因为 CSS 语言的个性，很容易呈现元素在无心中被一个蹩脚的类名定型的状况。这个问题十分频繁，所以有相当多的解决方案来解决这个问题。

在我看来，最好的两个是：

应用命名约定
CSS Modules

最风行的命名形式是 BEM 101。它代表了 Block、Element、Modifier办法。

[block]__[element]--[modifier]
/* Example */
.menu__link--blue {...}

其目标是通过让开发者理解 HTML 和 CSS 之间的关系来创立独特的名称。

我对 BEM 办法最大的放心是，它很耗时，而且要依附开发人员来实现。CSS 模块产生在预处理器一侧，这使得它没有谬误。它为咱们的 CSS 模块类名生成了随机的前缀 / 名称。

像素的应用相当频繁，因为它起初看起来很容易和直观的应用。事实恰恰相反。很久以来，像素曾经不再基于硬件了。它们只是基于一个光学参考单元。

px是一个相对单位。这意味着什么呢？那就是咱们不能适当地缩放以满足更多的人。

咱们应该用什么来代替？绝对单位是要走的路。咱们能够依附这些来更好地表白咱们的动静布局。例如，咱们能够应用 ch 来表白一个基于字符数的 div 宽度。

.article-column {
  /* ✅  咱们的元素将最多包容 20 个继承的字体大小的字符。*/
  max-width: 20ch;
}

通常状况下，px最罕用的替换单位是 rem 和em。它们以一种从框到文本的绝对形式来示意字体的绝对大小。

rem 示意绝对于根 font-size 的大小。
em 示意绝对于元素大小的大小。

通过应用 rem，咱们将可能依据用户偏好的字体大小来表白布局。

在下面的截图中，咱们能够看到基于 rem 单元的布局如何可能扩大并适应不同的默认字体大小。

当开始开发一个网站时，定义咱们的指标客户是至关重要的。跳过这一步，间接进行编码是很常见的。

为什么它至关重要? 它帮忙咱们理解咱们的应用程序将在哪种设施上应用。之后，咱们能够定义咱们将反对哪些浏览器和哪些版本。

只有咱们能提供适当的后备计划，咱们依然能够致力于承受像 subgrid 这样的前期性能。定义一个渐进的性能体验总是一个好主见。当一个个性失去更多的反对时，咱们能够逐渐摈弃它的后备计划。

像 caniuse.com 或 browserslist.dev 这样的工具在这方面很有帮忙。像 postcss 这样的工具自带的 autoprefixer 性能将帮忙咱们的 CSS 失去更宽泛的反对。

咱们曾经看到了如何改良咱们的 CSS 代码。遵循一些简略的领导准则，咱们能够实现一个申明式、可重用和可读的代码库。咱们应该在 CSS 中投入和在 Javascript 中一样多的精力。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://levelup.gitconnected.com/top-5-css-mistakes-to-avoid-…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

关于前端:5个需要避免的CSS错误

1. 不事后设计

2. CSS Code Smells

:: 符号

应用字符串连贯类

不正确地应用缩写

!important 的谬误应用

强制应用属性值

3. 不对 CSS 类名进行作用域划分

命名约定

CSS Modules

4. 应用 px 单位

5. 疏忽浏览器反对

总结

交换