首页 定制产品 地区报价 案例展示 企业介绍
  • 首页
  • 定制产品
  • 地区报价
  • 案例展示
  • 企业介绍
  • 企业介绍

    你的位置:【欧冠体育平台网址】 > 企业介绍 > 一篇带你相识五个必要防止的CSS舛误

    一篇带你相识五个必要防止的CSS舛误

    发布日期:2022-08-07 02:33    点击次数:154

    巨匠好,我是刷碗智,来日诰日带来 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