CSS最佳實踐：不良CSS的九種跡象

CSS或級聯樣式表-定義網頁外觀和行為的語言。 Web開發人員經常將它忽略為不需要太多關注的“簡單”語言。 記住一些最常見的屬性，通用流程和使用更晦澀的屬性進行搜索。 但是，正如經驗豐富的開發人員所知道的那樣，任何語言都不應該被忽略，因為總會有好事和壞事來做某事。

使用CSS時，很容易以錯誤的方式進行操作，因為沒有編譯器會引發錯誤，也沒有警告或註意錯誤的實現。 像JavaScript這樣的編程語言擁有大量的工具來跟踪良好的代碼質量，甚至有些工具向開發人員拋出消息，指出某些功能未正確實施。

在這篇相對簡短的文章中，我們將介紹開發人員面臨的一些常見問題以及如何解決它們。 這與特定視覺組件的特定實現細節無關。 相反，該清單著重於思考過程，體系結構和方法。

CSS的複雜性

CSS難嗎？ 沒有！ 絕對不是，它有一些非常基本的結構規則。 您有選擇器（類，id，元素），屬性和範圍。 它比諸如C，Java或PHP之類的語言少。 開發人員可以在幾分鐘的閱讀和開始樣式中獲得整個想法。 當然，要知道margin和padding之間的區別，您可以看看w3schools，但是何時使用它會帶來一些經驗。 但這不是火箭科學。

現在，使事情變得更加複雜的是選擇器爭用的所有方式來覆蓋下一個，以及一個屬性如何影響另一個屬性（例如display：block vs display：inline）。 然後，我們有一些更小的細節，例如邊距折疊，z索引堆疊，GPU vs CPU性能屬性，包裝盒模型和版式屬性。

最重要的是，新的CSS功能並非總是在瀏覽器中以相同的方式實現，有些甚至根本沒有實現，而其他功能則需要不同的屬性。

如果我們看一下以上兩段，我們將看到前端開發人員在使用CSS時遇到的兩個主要階段–一個是“哦，這就是全部嗎？ ”第二個是“哦****，那還不是全部”。 這就是“ CSS複雜性”的意思

有很多細微的東西交織在一起，很難擴展。 如果僅構建一個組件，則很容易-您可以對所看到的內容進行樣式設置，並且可以正常工作。 但是將單個組件放在更大的應用程序中，將應用其他樣式。 您可能最終會遇到與其他類相同的類（例如.button），並且您的樣式將應用於整個應用程序，從而破壞了所有內容。 壓力很大！

WordPress CSS：初學者基本指南

如何編寫CSS：對抗其複雜性

聰明人提出了一些解決方案，概述如下：

• BEM，SMACSS等CSS命名約定定義了類名規則，這些規則將減少發生衝突的可能性。
• JS中的CSS是一種較新的方法，實際上使您可以在JS文件中編寫CSS組件（聽起來很糟糕，看上去很糟糕，但至少有一定道理）。 通常對React，Vue等有效。
• CSS模塊是JS中CSS的一種更為健全的方法，適用於以一個文件包含所有樣式的人。 CSS模塊封裝了每個組件的樣式，以使它們不會洩漏到其他組件，從而使可重用性的方式變得更加容易。 它還可以大大減輕壓力！

第一個–命名約定可能是最難實施的，因為它沒有任何工具可以幫助您。 作為開發人員，一切由您自己來理解和應用該約定。 您仍然必須考慮類名，它們仍然不應該衝突，然後您必須使整個團隊都遵循它。 相當困難！

JS和CSS模塊中的CSS是實現性修復。 它們從整體上更改了代碼輸出，這實際上使洩漏樣式成為不可能。 但是他們需要完全不同的思維和構建設置，而這並非總是可行或不期望的。

最好的建議是：研究最常見和最成功的命名約定，使用適合您公司或生態系統編碼標準的命名約定。 了解組件分離，並開始考慮構建大型應用程序的範圍和單個單元。 從一開始就不是一個大型應用程序，這將是不可能管理的。

如果您正在處理包含像React這樣的庫或像Vue這樣的框架的堆棧，那麼請研究允許您使用它們管理樣式的其他工具。 對於任何初學者到中級CSS開發人員來說，它們都是非常有用的幫助！ 除非您有更好的選擇，否則您可能永遠不想拋棄它們。

隨時注意新工具！ 它們阻止了我們解決開發人員社區已經發現的問題，並解決並提供了解決這些問題的方法。

現在，我們概述了CSS複雜性的含義以及一些與之抗衡的入門技巧，讓我們深入了解更詳細的概述並提供直接的示例。

網站設計技巧：如何在網頁設計中提高您的遊戲水平

不良CSS的九種跡象

此列表絕對不完整，距離還很遠。 不幸的是，您將面臨無數其他問題，並希望在Stackoverflow之類的網站中找到針對特定問題的直接解決方案。
但是，如果您想提高自己的遊戲水平，則在解決幾行CSS問題時，您必須了解它們的作用。 為什麼要更改標記，為什麼要更改一些選擇器，屬性？

利潤率很奇怪

開發人員面臨的一個常見問題是，兩個元素的總和（上下）不相加。 例如，我們有兩個<p>元素，其邊距為：20px 0;。 它們之間的總空間是20像素，而不是40像素。這是由於頁邊空白導致的。 除非元素浮動或絕對定位。 對於幾乎所有定義，幾乎都無處不在此“例外”。

Z索引：9999999，但仍不在Z索引的頂部：1

首先，幾乎不需要編寫如此高的z索引。 我什至看到過像99999999999999之類的值或更高。 首先，z-index的最大值是2147483647，因此上述任何內容都是無用的。 其次，它不是那樣工作的。 哪些元素位於頂部由堆棧上下文定義，而不僅僅是z-index值。 請參見下圖：

不激活正確的屬性

這是一個相當簡單的問題，但是一些開發人員在動畫和採用方法方面遇到困難。 首先，可以製作動畫嗎？ 可以具有起始值，終止值以及介於兩者之間的任何值。 不透明度就是這樣一個屬性，您可以從0開始，從1結束，並在0.3、0.6758、0.9875等之間添加無限步長。您不能為“顯示”設置動畫，因為內聯和網格之間沒有中間步長。

低效的動畫

動畫上FPS不好的最常見原因是由於動畫設置錯誤。 如果更改絕對元素的“ left”屬性，則將利用CPU進行計算。 但是，如果使用transform，那麼它將是GPU。 眾所周知，GPU更好地進行圖形處理。

但是當陰影沒有其他選擇（如左/變換）時，您將如何為陰影設置動畫？ 好吧，動畫不透明！ 有兩個元素，一個具有開始狀態，一個具有結束狀態。 然後淡入淡出，然後淡入淡出。這會使它看起來像陰影在擴大，而實際上它只是在消失。

如果可能，請不要為影響佈局的元素設置動畫。 佈局計算非常昂貴，CPU只能進行有限的計算。 通常，每16毫秒少於一，這將導致FPS低於60。

選擇器過深

什麼是修飾符？ 一個類，您可以將其添加到另一個類並替換其某些屬性。 例如：.button的顏色為：紅色。 .button-primary，具有顏色：藍色。 因此，當您將.button-primary添加到.button時，您希望以藍色結尾。 十分簡單。 雖然，並非每次都那麼容易。 並非每次都是這樣的組件。

有時，我們想覆蓋一個組件，即特定頁面上另一個組件的子組件。 因此，我們最終得到這樣的結果：.page-name .section-name .component-1 .component-2 {…}已經深了四個級別。 但是事實證明，我們可以簡單地執行.page-name .componen-2 {…}。 越短越好！ 因為如果由於某種原因發生這種情況而您必須覆蓋該新樣式，則不必深入5個級別，然後再深入6個級別。

深度選擇器令人恐懼，人們最終使用！important。 當您要覆蓋無法控制的內聯樣式時，應使用！important。 否則，這是一個危險信號，表明您做的事情不正確。

文件太大

現在，對於大型應用程序，當然會有很多樣式，這是完全可以理解的。 但是它總是那麼大嗎？ 在SASS中擴展類（通過mixins）的不良方法會生成大型選擇器鏈，滾動查看它們需要花費幾秒鐘。 適當的擴展名將大大減少該文件。 甚至可以將大小減小一倍。

包含框架（僅使用其中的幾個屬性）也是大文件的常見原因。 將bootstrap / foundation，font-awesome，animate.css和其他一些類似的框架/庫捆綁在一起，最終會得到一個巨大的文件，使用該文件的比例約為2％。 清理，保持整潔，僅使用實際需要的東西。 很多時候甚至不需要框架。

不需要時的框架

Bootstrap，Foundation，UIKit和所有其他框架都很棒！ 它們解決了一個實際問題，對Web開發社區非常有價值。 無需了解非常適合製作儀表板和站點的HTML或CSS。 但是，從這種情況下走開，開始編寫一些CSS，您會遇到一些問題。

• 您必須正確了解如何構建它們以及如何包含它們
• 您必須閱讀他們的文檔才能找到他們提供的自定義設置和mixin。
• 您必須遵循他們的標記並教會您的團隊這樣做。
• 您必須真正了解如何擴展和样式化以創建獨特的視圖。

正確包含它們意味著您僅使用所需的內容。 要擁有這樣一個框架，而不是禁止您構建任何自定義項，您必須知道它的內部工作要比一般情況要好。 為了實現任何自定義設計，您將必須修改設置和屬性。 然後編寫一些自定義CSS。 該自定義CSS可以覆蓋框架提供的所有內容。

因此，如果沒有真正需要這樣的CSS框架，但是仍然有一個CSS框架，並且它沒有得到正確利用，這是一個危險信號，那就是出現了問題。 當您開始使用它時，您很可能最終會使用它，直到項目生命週期結束。 因此，這是一個重要的決定。

不允許內容定義大小

這更多是一個初學者級的問題，但這是一個非常常見的問題。 您應該給內容應有的自由。

例如，您不想將網站的width屬性設置為1200px。 您想要將最大寬度設置為1200px。 這樣，視口將使您的網站保持響應狀態。

然後，輸入字段的高度不應為40px，其填充值為1em。 現在，字體大小就是定義大小的內容。 而且，如果內部內容增加，該元素將不會中斷。

在定義大小時，這種思維方式在整個應用程序中仍然很重要。 每個屬性都必須考慮它。 理想情況下，不要為內容區域的寬度設置％，因為那樣的話，您還必須編寫媒體查詢。

如果具有最大寬度，則當瀏覽器縮小到該最大寬度以下時，內容將填滿瀏覽器寬度，然後正常縮小。 否則，您將不得不編寫該大小的媒體查詢。 然後針對網站上寫的其他任何自定義尺寸。 由於方法不好，因此增加了複雜性。 與我們已經討論過的所有其他方面幾乎相同。

JavaScript駭客

JavaScript可以創造奇蹟！ 但這並不總是需要的。 您可以使用受良好支持，不需要功能（此後最好自動測試）且不需要您的其他FE成員也了解JS的CSS來完成很多工作。

當然，這裡有標準的切換功能，您可以在：checked時使用複選框輸入來更改樣式，可以輕鬆觸發背景疊加層，還可以使用counter等屬性來創建比簡單的<ol>列表更多的屬性。 。

這裡的建議是首先尋找CSS解決方案。 假設您要建立一個彈出窗口。 它顯示在中間（位置：固定）。 然後，您想從[X]圖標關閉它，或者單擊它時將其關閉。 在JS中，您需要編寫事件，該事件將在彈出窗口內容之外的任何內容上觸發。 但是仍然會在彈出內容中的[X]上觸發。

相反，從CSS中，您可以編寫另一個<div>，該<div>的彈出窗口下方具有100vw，100vh大小和z-index。 然後，您只需在JS（單線）中將該div作為目標。

另一個示例–您希望可以在內容中放置一個按鈕，該按鈕將“擴展”其後的所有內容。 CSS簡單，而JS更複雜。 使用CSS，您可以執行以下操作：

 Label.button-直觀地設置按鈕樣式。

 Input：not（：checked）〜* {display：none}-將所有內容隱藏在同一容器中。

在同一容器中，您需要在JS中使用自定義邏輯。 您還需要選擇所有元素，這需要遍歷DOM樹。 然後將CSS樣式應用於它們，最終以style =”“標記結束，如果出於某種原因必須解決它們，則反過來需要！important。 幸運的是，在CSS中，它非常簡單。

成為優秀網頁設計師的途徑

結論

如您所見，這些是很少見的常見問題。 為了涵蓋所有內容，將需要一本書。 但是希望它們會給您一個好的起點，並提醒您考慮由於錯誤的方法而可能引起的任何潛在問題。 查找此類問題需要大量的經驗和大量的閱讀經驗。 如果您在這裡得出結論，那麼您的閱讀路徑正確了，現在該練習了！