一篇带你了解五个需要幸免的CSS空虚

环球好，我是刷碗智，今天带来 Jose Granja 大佬的著述，但愿对环球有所匡助。文本主张，仅供参与，非尺度谜底。

正如咱们今天所知，CSS谈话是web的一个进击构成部分。它使咱们有智商绘图元素在屏幕、网页或其他媒体中的展示阵势。

它简短、弘大，而况是声明式的。咱们不错很容易地已毕复杂的事情，如暗黑/光明模式。然则，对它有好多误会和空虚的使用。这些会把CSS标记酿成复杂的不可读且不可膨胀的代码。

咱们怎么才调真贵这种情况的发生?通过解任最好实行，幸免最常见的空虚。在这篇著述中，咱们将回来出5个最常见的空虚以及怎么幸免它们。

1. 不事先假想

不外程思考，立马脱手，这么可能会更快的完成任务，这也给了咱们一种速率和建立感。但，从永久来看，这会有相背的恶果。

在写代码之前，必须要先想了了。咱们将聘任什么阵势来假想组件?咱们想以原子的阵势建造咱们的组件吗?咱们是否茂盛创建一个可组合的实用系统?咱们想要一个还是内置的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 界说看起来完全是就地的，这个组件插手易被膨胀。

2. CSS Code Smells

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 的空虚使用

!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); } 

3.分歧CSS类名进行作用域区分

由于CSS谈话的特质，很容易出现元素在不测中被一个倒霉的类名定型的情况。这个问题至极平淡，是以有至极多的措置有策动来措置这个问题。

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

使用定名商定 CSS Modules 定名商定

最流行的定名阵势是BEM 101。它代表了 Block、Element、Modifier方法。

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

其主张是通过让路发者了解HTML和CSS之间的干系来创建私有的称号。

CSS Modules

我对BEM方法最大的牵记是，它很耗时，而况要依靠开发人员来已毕。CSS模块发生在预处理器一侧，这使得它莫得空虚。它为咱们的CSS模块类名生成了就地的前缀/称号。

4. 使用 px 单元

像素的使用至极平淡，因为它开始看起来很容易和直觉的使用。事实恰巧相背。很久以来，像素还是不再基于硬件了。它们仅仅基于一个光学参考单元。

px是一个完美单元。这意味着什么呢?那便是咱们不成适合地缩放以知足更多的人。

咱们应该用什么来代替?相对单元是要走的路。咱们不错依靠这些来更好地抒发咱们的动态布局。举例，咱们不错使用ch来抒发一个基于字符数的div宽度。

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

平淡情况下，px最常用的替换单元是rem和em。它们以一种从框到文本的相对阵势来表露字体的相对大小。

rem 表露相干于根 font-size 的大小。 em 表露相干于元素大小的大小。

通过使用 rem，咱们将大要说明用户偏好的字体大小来抒发布局。

在上头的截图中，咱们不错看到基于 rem 单元的布局怎么大要膨胀并稳妥不同的默许字体大小。

5. 忽略浏览器扶持

当启动开发一个网站时，界说咱们的指标客户是至关进击的。跳过这一步，径直进行编码是很常见的。

为什么它至关进击?它匡助咱们了解咱们的利用法子将在哪种开垦上使用。之后，咱们不错界说咱们将扶持哪些浏览器和哪些版块。

唯有咱们能提供适合的后备有策动，咱们仍然不错尽力于于罗致像subgrid这么的后期功能。界说一个渐进的功能体验老是一个好主意。当一个特质获取更多的扶持时，咱们不错徐徐毁灭它的后备有策动。

像caniuse.com或browserslist.dev这么的器具在这方面很有匡助。像postcss这么的器具自带的autoprefixer功能将匡助咱们的CSS获取更平淡的扶持。

回来

咱们还是看到了怎么阅兵咱们的CSS代码。解任一些简短的换取原则，咱们不错已毕一个声明式、可重用和可读的代码库。咱们应该在CSS中参加和在Javascript中同样多的元气心灵。

作家：Jose Granja 译者：前端小智

来源：medium原文：https://levelup.gitconnected.com/top-5-css-mistakes-to-avoid-963f76892954