搜尋
首頁web前端css教學總結整理:五大需要避坑的常見css錯誤(收藏)

這篇文章為大家總結5個最常見的css錯誤,並介紹一下避坑方法,希望對大家有幫助!

總結整理:五大需要避坑的常見css錯誤(收藏)

就如我們今天所知,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。它代表了 BlockElementModifier方法。

[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最常用的替换单位是remem。它们以一种从框到文本的相对方式来表示字体的相对大小。

  • rem 表示相对于根 font-size 的大小。
  • em 表示相对于元素大小的大小。

通过使用 rem,我们将能够根据用户偏好的字体大小来表达布局。

總結整理:五大需要避坑的常見css錯誤(收藏)

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

5. 忽略浏览器支持

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

为什么它至关重要?它帮助我们了解我们的应用程序将在哪种设备上使用。之后,我们可以定义我们将支持哪些浏览器和哪些版本。

只要我们能提供适当的后备方案,我们仍然可以致力于接受像subgrid这样的后期功能。定义一个渐进的功能体验总是一个好主意。当一个特性得到更多的支持时,我们可以逐步抛弃它的后备方案。

像caniuse.com或browserslist.dev这样的工具在这方面很有帮助。像postcss这样的工具自带的autoprefixer功能将帮助我们的CSS得到更广泛的支持。

总结

我们已经看到了如何改进我们的CSS代码。遵循一些简单的指导原则,我们可以实现一个声明式、可重用和可读的代码库。我们应该在CSS中投入和在Javascript中一样多的精力。

英文原文地址:https://levelup.gitconnected.com/top-5-css-mistakes-to-avoid-963f76892954

作者: Jose Granja

(学习视频分享:css视频教程

以上是總結整理:五大需要避坑的常見css錯誤(收藏)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助!

5个常见的JavaScript内存错误5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。

Node.js 19正式发布,聊聊它的 6 大特性!Node.js 19正式发布,聊聊它的 6 大特性!Nov 16, 2022 pm 08:34 PM

Node 19已正式发布,下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性,希望对大家有所帮助!

实战:vscode中开发一个支持vue文件跳转到定义的插件实战:vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

浅析Vue3动态组件怎么进行异常处理浅析Vue3动态组件怎么进行异常处理Dec 02, 2022 pm 09:11 PM

Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,希望对大家有所帮助!

聊聊如何选择一个最好的Node.js Docker镜像?聊聊如何选择一个最好的Node.js Docker镜像?Dec 13, 2022 pm 08:00 PM

选择一个Node​的Docker镜像看起来像是一件小事,但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢?

聊聊Node.js中的 GC (垃圾回收)机制聊聊Node.js中的 GC (垃圾回收)机制Nov 29, 2022 pm 08:44 PM

Node.js 是如何做 GC (垃圾回收)的?下面本篇文章就来带大家了解一下。

【6大类】实用的前端处理文件的工具库,快来收藏吧!【6大类】实用的前端处理文件的工具库,快来收藏吧!Jul 15, 2022 pm 02:58 PM

本篇文章给大家整理和分享几个前端文件处理相关的实用工具库,共分成6大类一一介绍给大家,希望对大家有所帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版