CSS或級聯(lián)樣式表-定義網(wǎng)頁外觀的語言， 有時會表現(xiàn) Web開發(fā)人員經(jīng)常將它忽略為不需要太多關(guān)注的“簡單”語言。 記住一些最常見的屬性， 一般的流程和谷歌搜索更晦澀的屬性是必經(jīng)之路。 但， 正如更有經(jīng)驗的開發(fā)人員所知道 沒有一種語言應(yīng)該被忽視，因為總有做事的好方法和壞方法。

有了CSS， 用錯誤的方式做事非常容易，因為沒有編譯器會拋出錯誤， 沒有關(guān)于不良實施的警告或通知。 JavaScript之類的編程語言擁有大量跟蹤良好代碼質(zhì)量的工具， 有些甚至向開發(fā)人員拋出消息，指出某些功能沒有以正確的方式實現(xiàn)。

在這篇相對簡短的文章中，我們將介紹開發(fā)人員面臨的一些常見問題以及如何解決這些問題。 這與特定視覺組件的特定實現(xiàn)細(xì)節(jié)無關(guān)。 反而， 該清單著重于思考過程， 體系結(jié)構(gòu)和方法。

CSS難嗎？ 不！ 當(dāng)然不， 它具有一些非常基本的結(jié)構(gòu)規(guī)則。 您有選擇器（類， ID， 元素）， 你有屬性，你有范圍。 比C語言還少， Java或PHP。 開發(fā)人員可以在幾分鐘的閱讀和開始樣式中獲得整個想法。 當(dāng)然， 要知道邊距和填充之間的區(qū)別， 您可以看看w3scho醇s， 但何時使用需要一些經(jīng)驗。 但這不是火箭科學(xué)。

現(xiàn)在， 使事情變得更復(fù)雜的是選擇器競爭的所有方法，這些方法會覆蓋下一個， 以及一個屬性如何影響另一個屬性（例如display：block vs display：inline）。 然后我們有一些更小的細(xì)節(jié)，例如邊距塌陷， Z索引堆疊 GPU與CPU的性能屬性， 盒子模型和版式屬性。

最重要的是 新的CSS功能在瀏覽器中并非總是以相同的方式實現(xiàn)的， 有些甚至根本沒有實現(xiàn)，而另一些要求不同的屬性。

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

有很多細(xì)微的東西交織在一起，很難擴(kuò)展。 如果您只構(gòu)建一個組件， 這很容易–您可以隨心所欲地設(shè)置樣式，并且可以正常工作。 但是將單個組件放在更大的應(yīng)用程序中，將應(yīng)用其他樣式。 您可能最終會與其他班級進(jìn)入同一班級（例如）。按鈕），您的樣式將應(yīng)用于整個應(yīng)用程序， 打破一切。 壓力很大！

WordPress CSS：初學(xué)者基本指南

有一些聰明人提出的解決方案， 概述將是：

• CSS命名約定，例如BEM， SMACSS等 定義了類名規(guī)則，這些規(guī)則將減少發(fā)生沖突的可能性。
• JS中的CSS是一種較新的方法，實際上可以讓您在JS文件中編寫CSS組件（聽起來很糟糕， 看起來不好 但至少有一定道理）。 通常對React有效， Vue和其他人。
• 對于那些在一個文件中使用所有樣式的人來說，CSS模塊是JS中CSS的一種更為健全的方法。 CSS模塊封裝了每個組件的樣式，以使它們不會泄漏到其他組件， 使可重用性的方法更容易。 它也大大減輕了壓力！

首先 - 命名約定 它可能最難實現(xiàn)，因為它沒有任何工具可以幫助您。 這一切都留給了您作為開發(fā)人員 了解和應(yīng)用 慣例。 您仍然必須考慮類名， 他們?nèi)匀徊粦?yīng)該沖突，然后您必須讓整個團(tuán)隊跟隨它。 相當(dāng)困難！

JS中的CSS 和 CSS模塊 是實施修復(fù)。 他們整體上改變了代碼輸出， 這實際上使得不可能泄漏樣式。 但是他們需要完全不同的思維方式并建立設(shè)置， 并非總是可行或不需要的東西。

最好的建議是： 研究最常見和最成功的命名約定， 使用適合您公司或生態(tài)系統(tǒng)編碼標(biāo)準(zhǔn)的編碼。 了解組件分離，并開始考慮構(gòu)建大型應(yīng)用程序的范圍和單個單元。 從一開始就不是大型應(yīng)用， 那將是不可能的。

如果您正在處理包含像React這樣的庫或像Vue這樣的框架的堆棧， 然后研究其他工具，使您可以使用它們管理樣式。 對于任何初學(xué)者到中級CSS開發(fā)人員， 他們將是一個很大的幫助！ 除非您有更好的選擇，否則您可能永遠(yuǎn)不想拋棄它們。

隨時注意新工具！ 他們阻止我們解決開發(fā)者社區(qū)已經(jīng)發(fā)現(xiàn)的問題， 修復(fù)并提供了處理這些問題的方法。

現(xiàn)在，我們概述了CSS復(fù)雜性的含義以及一些與之抗衡的入門技巧， 讓我們深入了解更詳細(xì)的概述并提供直接的示例。

網(wǎng)站設(shè)計技巧：如何在網(wǎng)頁設(shè)計中提升您的游戲水平

此列表絕對不完整， 不在很遠(yuǎn)的地方。 可悲的是 您將面臨無數(shù)其他問題，并希望在Stackoverflow之類的網(wǎng)站中找到針對特定問題的直接解決方案。
然而， 如果您想加強(qiáng)自己的游戲， 當(dāng)您用幾行CSS解決問題時， 您必須了解他們的工作。 為什么您必須更改標(biāo)記， 以及為什么要更改一些選擇器， 特性？

開發(fā)人員面臨的一個常見問題是，兩個元素的總和（上下）不相加。 例如， 我們有兩個 p> 邊距為20px 0;的元素。 它們之間的總空間為20px， 不是40。 這是由于保證金崩潰。 除非元素浮動或絕對定位。 對于幾乎每個定義，幾乎都無處不在此“例外”。

首先， 幾乎不需要編寫如此高的z索引。 我什至看到過像99999999999999之類的值或更高。 第一的， z-index的最大值是2147483647， 所以上面的任何事情都是沒有用的。 第二， 它不是那樣工作的。 哪些元素位于頂部由堆棧上下文定義， 不僅是z-index值。 請參見下圖：

這是一個非常簡單的問題， 但是一些開發(fā)人員在動畫和采用方法方面遇到了困難。 第一的， 可以制作動畫嗎？ 任何可以具有起始值的東西， 最終值以及介于兩者之間的任何值。 不透明度就是這樣的屬性， 您可以從0開始， 在1結(jié)束 并在0之間添加無限步長。3。 0。6758， 0。9875等 您不能為“顯示”設(shè)置動畫，因為在嵌入式和網(wǎng)格之間沒有中間步驟。

動畫上的FPS較差的最常見原因是由于錯誤地設(shè)置了動畫屬性。 如果您更改絕對元素的“左”屬性， 您將利用CPU進(jìn)行計算。 然而， 如果您使用轉(zhuǎn)換， 那將是GPU。 眾所周知，GPU更好地進(jìn)行圖形處理。

但是你怎么給陰影加動畫， 什么時候沒有像左/變換這樣的選擇？ 出色地， 動畫不透明！ 有兩個要素， 一開始 狀態(tài)， 一個以結(jié)束狀態(tài)。 然后淡入淡出開始和結(jié)束。 這會使它看起來像陰影在擴(kuò)大， 實際上，它只會消失。

如果可能的話，請勿為會影響布局的元素設(shè)置動畫。 布局計算非常昂貴，CPU只能進(jìn)行有限的計算。 經(jīng)常， 每16ms少于1個 這會使FPS低于60。

什么是修飾符？ 一類， 您可以將其添加到另一個類并替換其某些屬性。 例子：。按鈕有顏色：紅色。 。按鈕主要 有顏色：藍(lán)色。 所以， 當(dāng)您添加時。以按鈕為主。按鈕， 您想要以藍(lán)色結(jié)尾。 十分簡單。 雖然， 并非每次都那么容易。 并非每次都是這樣的組件。

有時， 我們要覆蓋一個組件， 特定頁面上另一個組件的子級。 因此，我們最終得到了這樣的內(nèi)容：。頁面名。section-name。組件1。component-2 { … } Already four levels deep. 但是事實證明，我們可以做到。頁面名。componen-2 { … }. 越短越好！ 因為如果由于某種原因發(fā)生這種情況，您必須覆蓋該新樣式， 您不必深入5個層次， 然后6 然后更多。

深度選擇器令人恐懼，人們最終使用！重要的。 ！當(dāng)您要覆蓋無法控制的內(nèi)聯(lián)樣式時，應(yīng)使用“重要”字樣。 否則， 這是一個危險信號，表明您做的事情不正確。

現(xiàn)在， 當(dāng)然， 對于大型應(yīng)用程序，會有很多樣式， 這是完全可以理解的。 但是它總是那么大嗎？ 在SASS中擴(kuò)展類的錯誤方式（通過mixin）會生成較大的選擇器鏈， 滾動查看所有內(nèi)容都需要花費(fèi)幾秒鐘的時間。 適當(dāng)?shù)臄U(kuò)展名將大大減少該文件。 甚至可以將大小減小一倍。

包含的框架 其中只有少數(shù)幾個屬性正在使用也是大文件的常見原因。 將引導(dǎo)程序/基礎(chǔ)捆綁在一起， 字體很棒 動畫。css和其他一些類似的框架/庫，最終您會得到一個巨大的文件，您將在其中使用約2％的文件。 清理， 保持整潔，只使用真正需要的東西。 很多時候甚至不需要框架。

引導(dǎo)程序 基礎(chǔ)， UIKit和所有其他框架都很棒！ 它們解決了一個實際問題，對Web開發(fā)社區(qū)非常有價值。 無需了解非常適合制作儀表板和站點的HTML或CSS。 但是不要這樣 開始編寫一些CSS，您會遇到一些問題。

• 您必須正確了解如何構(gòu)建它們以及如何包含它們
• 您必須閱讀他們的文檔才能找到他們提供的自定義設(shè)置和mixin。
• 您必須遵循他們的標(biāo)記，并教您的團(tuán)隊這樣做。
• 您必須真正了解如何擴(kuò)展和樣式化以創(chuàng)建獨(dú)特的視圖。

正確包含它們意味著您僅使用所需的內(nèi)容。 為了擁有這樣一個框架，而不是禁止您構(gòu)建任何自定義項， 您必須知道它的內(nèi)部運(yùn)作要好于平均水平。 并實現(xiàn)任何自定義設(shè)計， 您將必須修改設(shè)置和屬性。 然后編寫一些自定義CSS。 該自定義CSS可以覆蓋框架提供的所有內(nèi)容。

因此，如果真的不需要這樣的CSS框架， 但是仍然有一個沒有被正確地利用， 這是一個危險信號，表明出現(xiàn)了問題。 當(dāng)您開始使用它時， 您很可能會在項目生命周期結(jié)束之前使用它。 因此，這是一個重要的決定。

這更多是初學(xué)者的問題， 但這是很常見的一種 您應(yīng)該給內(nèi)容應(yīng)有的自由。

例子， 您不想設(shè)置網(wǎng)站的 寬度 屬性設(shè)置為1200px。 您要設(shè)置 最大寬度 到1200像素。 那樣， 視口將使您的網(wǎng)站保持響應(yīng)狀態(tài)。

然后， 輸入字段的高度不應(yīng)為40px， 它應(yīng)該有1em填充。 現(xiàn)在， 字體大小， 內(nèi)容是定義大小的要素。 如果里面的內(nèi)容增加了， 元素不會中斷。

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

如果您有最大寬度， 當(dāng)您的瀏覽器縮小到最大寬度以下時， 內(nèi)容將填滿瀏覽器寬度，然后正常縮小。 別的， 您將不得不編寫該尺寸的媒體查詢。 然后針對網(wǎng)站上寫的其他任何自定義尺寸。 由于方法錯誤，這增加了復(fù)雜性。 與我們已經(jīng)討論過的所有其他方面幾乎相同。

JavaScript可以創(chuàng)造奇跡！ 但這并不總是需要的。 您可以使用受良好支持的CSS來完成很多工作， 不需要功能（最好在以后自動測試），也不需要您的其他FE成員也了解JS。

當(dāng)然， 有標(biāo)準(zhǔn)的切換功能， ：checked時，您可以在其中使用復(fù)選框輸入來更改樣式， 有可以輕松觸發(fā)的背景疊加層，還有諸如counter之類的屬性可以創(chuàng)建比簡單更多的屬性 ol> 列表。

這里的建議是首先尋找CSS解決方案。 假設(shè)您要建立一個彈出窗口。 它顯示在中間（位置：固定）。 Then you want to close it from the [X] icon or when you click around it. 在JS中，您需要編寫事件，該事件將在彈出窗口內(nèi)容之外的任何內(nèi)容上觸發(fā)。 But still trigger on the [X] which is in the popup content.

反而， 從CSS中，您可以編寫另一個 股利> 有100vw， 彈出窗口下方為100vh大小和z-index。 然后，您只需在JS中定位該div， 這是單線的。

另一個例子-您想要一個可以放置在內(nèi)容中的按鈕， 這將“擴(kuò)展”其后的所有內(nèi)容。 簡單的CSS， JS有點復(fù)雜。 使用CSS，您可以執(zhí)行以下操作：

標(biāo)簽。button-直觀地設(shè)置按鈕樣式。

Input:not(:checked) ~ * { display: none} - hide everything after it in the same container.

那個“在同一個容器中” 您需要在JS中使用自定義邏輯。 您還需要選擇所有元素， 這需要遍歷DOM樹。 然后將CSS樣式應(yīng)用于它們， 最終以style =””標(biāo)簽結(jié)尾， 反過來又需要！很重要，如果由于某種原因您必須解決這些問題。 在CSS中， 謝天謝地， 這非常簡單。

成為優(yōu)秀網(wǎng)頁設(shè)計師的道路

如你看到的， 這些是很少見的常見問題。 為了涵蓋所有內(nèi)容， 需要一本書。 但是希望 它們將為您提供一個良好的起點，并提醒您考慮由于錯誤的方法而可能引起的任何潛在問題。 查找此類問題需要大量的經(jīng)驗和大量的閱讀經(jīng)驗。 如果您在這里得出結(jié)論， 那么您在閱讀的正確道路上， 現(xiàn)在該練習(xí)了！

長期發(fā)展， 支持， 和您的WordPress平臺的創(chuàng)新。 DevriX為中小型企業(yè)和快節(jié)奏的初創(chuàng)企業(yè)提供技術(shù)合作伙伴關(guān)系。 我們構(gòu)建WordPress解決方案并擴(kuò)展平臺，最多可生成20個，000，每月000次網(wǎng)頁瀏覽。

DevriX的創(chuàng)意主管和前端開發(fā)人員
亞歷克斯（Alex）的熱情在于學(xué)習(xí)新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來優(yōu)化網(wǎng)站性能并改善用戶體驗。 亞歷克斯（Alex）喜歡騎自行車和數(shù)字藝術(shù)，最近開始在ELSYS技術(shù)學(xué)校教授設(shè)計。