5個需要避免的CSS錯誤

家好，我是刷碗智，今天帶來 Jose Granja 大佬的文章，希望對大家有所幫助。文本觀點，僅供參與，非標準答案。

正如我們今天所知，CSS語言是web的一個重要組成部分。它使我們有能力繪制元素在屏幕、網頁或其他媒體中的展示方式。

它簡單、強大，而且是聲明式的。我們可以很容易地實現復雜的事情，如暗黑/光明模式。然而，對它有很多誤解和錯誤的使用。這些會把CSS標記變成復雜的不可讀且不可擴展的代碼。

我們如何才能防止這種情況的發生？通過遵循最佳實踐，避免最常見的錯誤。在這篇文章中，我們將總結出5個最常見的錯誤以及如何避免它們。

用Electron開發桌面應用的避坑指南【送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

ideo元素與audio元素所具有的屬性大致相同，

下面來看一下這兩個元素都具有哪些屬性。

　src屬性和autoplay屬性

src屬性用于指定媒體數據的URL地址。

autoplay屬性用于指定媒體是否在頁面加載后自動播放，使用方法如下。

在文件中創建多媒體元素<video>，并在元素的src屬性中，

設置播放的視頻文件的URL地址，并設置頁面加載完成后自動播放這個文件。代碼如下。

<!DOCTYPE HTML>

<html>

<head>

<title>使用多媒體元素播放文件</title>

</head>

<body>

你的瀏覽器不支持視頻

</video>

</body>

</html>

　perload屬性

perload屬性用于指定視頻或音頻數據是否預加載。如果使用預加載，

則瀏覽器會預先將視頻或音頻數據進行緩沖，這樣可以加快播放速度，

因為播放時數據已經預先緩沖完畢。

該屬性有3個可選值，分別是none、metadata和auto，其默認值為auto。

　none值表示不進行預加載。

　metadata表示只預加載媒體的元數據（媒體字節數、第一幀、播放列表、持續時間等）。

　auto表示預加載全部視頻或音頻。

該屬性的使用方法如下。

　poster（video元素獨有屬性）和loop屬性

當視頻不可用時，可以使用該元素向用戶展示一幅替代用的圖片。當視頻不可用時，

最好使用poster屬性，以免展示視頻的區域中出現一片空白。

該屬性的使用方法如下。

在文件中創建一個video元素，為video元素設置poster屬性，并選取一幅圖片作為該屬性的值。代碼如下。

<html>

<head>

<title>設置video 元素的poster 屬性</title>

</head>

<body>

你的瀏覽器不支持視頻

</video>

</body>

</html>

運行實例，在播放視頻文件之前，在視頻播放區域中首先將顯示poster屬性指定的圖片，

loop屬性用于指定是否循環播放視頻或音頻，

其使用方法如下。

　controls屬性、width屬性和height屬性（后兩個是video元素獨有屬性）

controls屬性指定是否為視頻或音頻添加瀏覽器自帶的播放用的控制條。

控制條中具有播放、暫停等按鈕。其使用方法如下。

說明

開發者也可以在腳本中自定義控制條，而不使用瀏覽器默認的控制條。

width屬性與height屬性用于指定視頻的寬度與高度（以像素為單位），

使用方法如下。

在文件中創建一個video元素，首先在元素的src屬性中設置需要播放的視頻文件，

然后分別設置video元素的寬度與高度。代碼如下。

<html>

<head>

<title>設置video 元素的大小</title>

</head>

<body>

你的瀏覽器不支持視頻

</video>

</body>

</html>

　error屬性

在讀取、使用媒體數據的過程中，正常情況下該屬性為null，

但是任何時候只要出現錯誤，該屬性將返回一個MediaError對象，

該對象的code屬性返回對應的錯誤狀態碼，其可能的值如下。

　MEDIA_ERR_ABORTED（數值1）：媒體數據的下載過程由于用戶的操作而被終止。

　MEDIA_ERR_NETWORK（數值2）：確認媒體資源可用，但是在下載時出現網絡錯誤，媒體數據的下載過程被終止。

　MEDIA_ERR_DECODE(數值3）：確認媒體資源可用，但是解碼時發生錯誤。

　MEDIA_ERR_SRC_NOT_SUPPORTED（數值4）：媒體資源不可用，媒體格式不被支持。

error屬性為只讀屬性。

　networkState屬性

該屬性在媒體數據加載過程中讀取當前網絡的狀態，其值如下。

　NETWORK_EMPTY（數值0）：元素處于初始狀態。

　NETWORK_IDLE（數值1）：瀏覽器已選擇好用什么編碼格式來播放媒體，但尚未建立網絡連接。

　NETWORK_LOADING（數值2）：媒體數據加載中。

　NETWORK_NO_SOURCE（數值3）：沒有支持的編碼格式，不執行加載。

networkState屬性為只讀屬性，讀取網絡狀態的實例代碼如下。

　currentSrc屬性、buffered屬性

可以用currentSrc屬性來讀取播放中的媒體數據的URL地址，該屬性為只讀屬性。

最靠譜的WEB前端教程——整整140集，全程干貨無廢話，學完變大佬！

示：點擊上方"WEB網頁設計自學平臺"↑ 可以訂閱噢！

摘要 51RGB官方微信在學習CSS制作知識之前，我們必須需要認識的HTML什么基礎知識。

一、必知HTML基礎-CSS教程系列

搞清瀏覽器作用
搞清什么是HTML
html作用
html我們涉及哪些基礎知識
常見html單詞及單詞功能作用有哪些
html結構
html與CSS關系

1、搞清瀏覽器作用

瀏覽器主要作用是瀏覽網頁作用，在DIV+CSS制作開發時候仍然是瀏覽我們制作開發重構網頁作用。瀏覽器可測試我們開發的CSS網頁兼容性、網頁效果、因開發疏忽導致錯誤等作用。

在CSS測試（CSS工具）里常用瀏覽器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、蘋果Safari、Opera主流瀏覽器。至于傲游、360瀏覽器因為他們使用你系統自帶的IE內核，所以不必考慮，只要支持你瀏覽器版本即支持類似這2款瀏覽器

需要兼容瀏覽器有哪些？http://www.51rgb.com/css-tool/t86.shtml

2、搞清什么是HTML

html是hypertext markup language的縮寫，即超文本標記語言。可以這樣理解，HTML文件是一定規則規律以html\htm等命名后綴名的文本文件。

3、html作用

HTML作用，通過一定html自身語法結構（html結構），顯示文字、圖片、動畫（flash）、視頻或音頻音樂。而CSS則是配合html實現漂亮的各式各樣的頁面內容。

4、html我們涉及哪些基礎知識

Html擴展名、html源代碼、DOCTYPE、html結構、head標簽、charset

5、常見html單詞及單詞功能作用有哪些

a、B(strong)：加粗

b、P：換行實例：<p>我是第一段內容</p><p>我是第二段內容</p>

c、Br：提行實例：我是第一排<br />我是第二排內容

d、px：像素、長度寬度單位

實例：width:30px; 寬度30像素

e、ul、ol、li列表標簽實例：

<ul> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ul> 
<ol> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ol>

f、div與span：都是html標簽

實例：<div>我占一行</div><span>我多長占多長位置</span>

兩者區別：DIV占用1整排，而SPAN所占位置是內容多少占用多長長度

g、img：圖片引用標簽

<img src="/css-images/css-logo.gif" />圖片標簽

h、dl dt dd：CSS的另類表格組合

實例：

<dl>

</dl>

j、title：標題標簽

實例：<title>標題</title>

特點，在一個網頁內只能使用一次（只能出現一次）

6、html結構 - TOP

這里Html結構可用于每次新建制作網頁模板使用。

舊html結構：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIVCSS5標題</title>

</head>

<body>

具體網頁呈現內容

</body>

</html>

經過CSS教程網的DIVCSS5優化后的HTML結構（可用于每次新建HTML模板）：

<!DOCTYPE html>

<html>

內容www.divcss5.com提供

7、html與CSS關系 - TOP

搞清楚html與CSS關系很重要，也是認識CSS基礎。html與CSS關系解釋：HTML內放置顯示網頁要顯示的具體內容（圖片、文字、動畫等）而CSS是控制HTML內這些具體內容的怎么顯示、怎么排版、顏色、大小、寬度、高度、左右布局等顯示樣式。

以上7點是學習CSS的html基礎，可能還不完善，但是在以后運用的時候DIVCSS5會給大家詳細、本簡單CSS教程分為15節，此節DIV CSS教程以文字內容為主，以后會穿插更多實例和圖例、跟我做的內容希望對大家能有幫助。

在線咨詢

上一篇：how to center a div，如何讓一個D
下一篇：詳解生產環境利用slowquery工具配置郵件告警

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

5個需要避免的CSS錯誤

1. 不預先設計

2. CSS Code Smells

:: 符號

使用字符串連接類

不正確地使用縮寫

!important 的錯誤使用

強制使用屬性值

3.不對CSS類名進行作用域劃分

命名約定

CSS Modules

4. 使用 px 單位

5. 忽略瀏覽器支持

總結

1、搞清瀏覽器作用

2、搞清什么是HTML

3、html作用

5、常見html單詞及單詞功能作用有哪些

7、html與CSS關系 - TOP

您的項目需求