作者： Jose Granja
译者：前端小智
起源：medium
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
正如咱们明天所知，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中一样多的精力。
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://levelup.gitconnected....
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。