搜尋
首頁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技巧cohost.org丟失的CSS技巧cohost.orgApr 25, 2025 am 09:51 AM

在這篇文章中,布萊克·莫里(Blackle Mori)向您展示了一些駭客,同時試圖推動同位HTML支持的極限。如果您敢於使用這些,以免您也被標記為CSS罪犯。

光標的下一個CSS樣式光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM

具有CSS的自定義光標很棒,但是我們可以將JavaScript提升到一個新的水平。使用JavaScript,我們可以在光標狀態之間過渡,將動態文本放置在光標中,應用複雜的動畫並應用過濾器。

世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM

互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球,但CSS的靈活性和力量的增加,可以懷疑Lee&Aver Lee有一天會成為一種

使用CSS背景過濾器進行UI效果使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM

有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器,並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。

微笑嗎?微笑嗎?Apr 23, 2025 am 09:57 AM

好吧,事實證明,SVG的內置動畫功能從未按計劃進行棄用。當然,CSS和JavaScript具有承載負載的能力,但是很高興知道Smil並沒有像以前那樣死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的,讓#039;跳上文字包裝:Safari Technology Preview In Pretty Landing!但是請注意,它與在鉻瀏覽器中的工作方式不同。

CSS-tricks編年史XLIIICSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了,重點介紹了年鑑,最近的播客出現,新的CSS計數器指南以及增加了幾位新作者,這些新作者貢獻了有價值的內容。

tailwind的@Apply功能比聽起來更好tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM

在大多數情況下,人們展示了@Apply的@Apply功能,其中包括Tailwind的單個property實用程序之一(會改變單個CSS聲明)。當以這種方式展示時,@Apply聽起來似乎很有希望。如此明顯

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

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

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具