摘要 最后修改：2020年5月27日閱讀時(shí)間：觀點(diǎn)CSS或級聯(lián)樣式表-定義網(wǎng)頁外觀的語言，有時(shí)會(huì)表現(xiàn)Web開發(fā)人員經(jīng)常將它忽略為不需要太多關(guān)注的“簡單”語言。記住一些最常見的屬性，一般的流程和谷歌搜索更晦澀的屬性是必經(jīng)之路。但，正如更有經(jīng)驗(yàn)的開發(fā)人員所知道沒有一種語言應(yīng)該被忽視
CSS或級聯(lián)樣式表-定義網(wǎng)頁外觀的語言， 有時(shí)會(huì)表現(xiàn) Web開發(fā)人員經(jīng)常將它忽略為不需要太多關(guān)注的“簡單”語言。 記住一些最常見的屬性， 一般的流程和谷歌搜索更晦澀的屬性是必經(jīng)之路。 但， 正如更有經(jīng)驗(yàn)的開發(fā)人員所知道 沒有一種語言應(yīng)該被忽視，因?yàn)榭傆凶鍪碌暮梅椒ê蛪姆椒ā?/p>
有了CSS， 用錯(cuò)誤的方式做事非常容易，因?yàn)闆]有編譯器會(huì)拋出錯(cuò)誤， 沒有關(guān)于不良實(shí)施的警告或通知。 JavaScript之類的編程語言擁有大量跟蹤良好代碼質(zhì)量的工具， 有些甚至向開發(fā)人員拋出消息，指出某些功能沒有以正確的方式實(shí)現(xiàn)。
在這篇相對簡短的文章中，我們將介紹開發(fā)人員面臨的一些常見問題以及如何解決這些問題。 這與特定視覺組件的特定實(shí)現(xiàn)細(xì)節(jié)無關(guān)。 反而， 該清單著重于思考過程， 體系結(jié)構(gòu)和方法。
CSS難嗎？ 不！ 當(dāng)然不， 它具有一些非?；镜慕Y(jié)構(gòu)規(guī)則。 您有選擇器（類， ID， 元素）， 你有屬性，你有范圍。 比C語言還少， Java或PHP。 開發(fā)人員可以在幾分鐘的閱讀和開始樣式中獲得整個(gè)想法。 當(dāng)然， 要知道邊距和填充之間的區(qū)別， 您可以看看w3scho醇s， 但何時(shí)使用需要一些經(jīng)驗(yàn)。 但這不是火箭科學(xué)。
現(xiàn)在， 使事情變得更復(fù)雜的是選擇器競爭的所有方法，這些方法會(huì)覆蓋下一個(gè)， 以及一個(gè)屬性如何影響另一個(gè)屬性（例如display：block vs display：inline）。 然后我們有一些更小的細(xì)節(jié)，例如邊距塌陷， Z索引堆疊 GPU與CPU的性能屬性， 盒子模型和版式屬性。
最重要的是 新的CSS功能在瀏覽器中并非總是以相同的方式實(shí)現(xiàn)的， 有些甚至根本沒有實(shí)現(xiàn)，而另一些要求不同的屬性。
如果我們看一下以上兩段， 我們將看到前端開發(fā)人員在使用CSS時(shí)遇到的兩個(gè)主要階段–一個(gè)是“哦， 這就是全部？ 哦 ****， 那還不是全部
有很多細(xì)微的東西交織在一起，很難擴(kuò)展。 如果您只構(gòu)建一個(gè)組件， 這很容易–您可以隨心所欲地設(shè)置樣式，并且可以正常工作。 但是將單個(gè)組件放在更大的應(yīng)用程序中，將應(yīng)用其他樣式。 您可能最終會(huì)與其他班級進(jìn)入同一班級（例如）。按鈕），您的樣式將應(yīng)用于整個(gè)應(yīng)用程序， 打破一切。 壓力很大！
WordPress CSS：初學(xué)者基本指南
有一些聰明人提出的解決方案， 概述將是：
CSS命名約定，例如BEM， SMACSS等 定義了類名規(guī)則，這些規(guī)則將減少發(fā)生沖突的可能性。
JS中的CSS是一種較新的方法，實(shí)際上可以讓您在JS文件中編寫CSS組件（聽起來很糟糕， 看起來不好 但至少有一定道理）。 通常對React有效， Vue和其他人。
對于那些在一個(gè)文件中使用所有樣式的人來說，CSS模塊是JS中CSS的一種更為健全的方法。 CSS模塊封裝了每個(gè)組件的樣式，以使它們不會(huì)泄漏到其他組件， 使可重用性的方法更容易。 它也大大減輕了壓力！
首先 - 命名約定 它可能最難實(shí)現(xiàn)，因?yàn)樗鼪]有任何工具可以幫助您。 這一切都留給了您作為開發(fā)人員 了解和應(yīng)用 慣例。 您仍然必須考慮類名， 他們?nèi)匀徊粦?yīng)該沖突，然后您必須讓整個(gè)團(tuán)隊(duì)跟隨它。 相當(dāng)困難！
JS中的CSS 和 CSS模塊 是實(shí)施修復(fù)。 他們整體上改變了代碼輸出， 這實(shí)際上使得不可能泄漏樣式。 但是他們需要完全不同的思維方式并建立設(shè)置， 并非總是可行或不需要的東西。
最好的建議是： 研究最常見和最成功的命名約定， 使用適合您公司或生態(tài)系統(tǒng)編碼標(biāo)準(zhǔn)的編碼。 了解組件分離，并開始考慮構(gòu)建大型應(yīng)用程序的范圍和單個(gè)單元。 從一開始就不是大型應(yīng)用， 那將是不可能的。
如果您正在處理包含像React這樣的庫或像Vue這樣的框架的堆棧， 然后研究其他工具，使您可以使用它們管理樣式。 對于任何初學(xué)者到中級CSS開發(fā)人員， 他們將是一個(gè)很大的幫助！ 除非您有更好的選擇，否則您可能永遠(yuǎn)不想拋棄它們。
隨時(shí)注意新工具！ 他們阻止我們解決開發(fā)者社區(qū)已經(jīng)發(fā)現(xiàn)的問題， 修復(fù)并提供了處理這些問題的方法。
現(xiàn)在，我們概述了CSS復(fù)雜性的含義以及一些與之抗衡的入門技巧， 讓我們深入了解更詳細(xì)的概述并提供直接的示例。
網(wǎng)站設(shè)計(jì)技巧：如何在網(wǎng)頁設(shè)計(jì)中提升您的游戲水平
此列表絕對不完整， 不在很遠(yuǎn)的地方。 可悲的是 您將面臨無數(shù)其他問題，并希望在Stackoverflow之類的網(wǎng)站中找到針對特定問題的直接解決方案。
開發(fā)人員面臨的一個(gè)常見問題是，兩個(gè)元素的總和（上下）不相加。 例如， 我們有兩個(gè) p> 邊距為20px 0;的元素。 它們之間的總空間為20px， 不是40。 這是由于保證金崩潰。 除非元素浮動(dòng)或絕對定位。 對于幾乎每個(gè)定義，幾乎都無處不在此“例外”。
首先， 幾乎不需要編寫如此高的z索引。 我什至看到過像99999999999999之類的值或更高。 第一的， z-index的最大值是2147483647， 所以上面的任何事情都是沒有用的。 第二， 它不是那樣工作的。 哪些元素位于頂部由堆棧上下文定義， 不僅是z-index值。 請參見下圖：
這是一個(gè)非常簡單的問題， 但是一些開發(fā)人員在動(dòng)畫和采用方法方面遇到了困難。 第一的， 可以制作動(dòng)畫嗎？ 任何可以具有起始值的東西， 最終值以及介于兩者之間的任何值。 不透明度就是這樣的屬性， 您可以從0開始， 在1結(jié)束 并在0之間添加無限步長。3。 0。6758， 0。9875等 您不能為“顯示”設(shè)置動(dòng)畫，因?yàn)樵谇度胧胶途W(wǎng)格之間沒有中間步驟。
動(dòng)畫上的FPS較差的最常見原因是由于錯(cuò)誤地設(shè)置了動(dòng)畫屬性。 如果您更改絕對元素的“左”屬性， 您將利用CPU進(jìn)行計(jì)算。 然而， 如果您使用轉(zhuǎn)換， 那將是GPU。 眾所周知，GPU更好地進(jìn)行圖形處理。
但是你怎么給陰影加動(dòng)畫， 什么時(shí)候沒有像左/變換這樣的選擇？ 出色地， 動(dòng)畫不透明！ 有兩個(gè)要素， 一開始 狀態(tài)， 一個(gè)以結(jié)束狀態(tài)。 然后淡入淡出開始和結(jié)束。 這會(huì)使它看起來像陰影在擴(kuò)大， 實(shí)際上，它只會(huì)消失。
如果可能的話，請勿為會(huì)影響布局的元素設(shè)置動(dòng)畫。 布局計(jì)算非常昂貴，CPU只能進(jìn)行有限的計(jì)算。 經(jīng)常， 每16ms少于1個(gè) 這會(huì)使FPS低于60。
什么是修飾符？ 一類， 您可以將其添加到另一個(gè)類并替換其某些屬性。 例子：。按鈕有顏色：紅色。 。按鈕主要 有顏色：藍(lán)色。 所以， 當(dāng)您添加時(shí)。以按鈕為主。按鈕， 您想要以藍(lán)色結(jié)尾。 十分簡單。 雖然， 并非每次都那么容易。 并非每次都是這樣的組件。
有時(shí)， 我們要覆蓋一個(gè)組件， 特定頁面上另一個(gè)組件的子級。 因此，我們最終得到了這樣的內(nèi)容：。頁面名。section-name。組件1。component-2 { … } Already four levels deep. 但是事實(shí)證明，我們可以做到。頁面名。componen-2 { … }. 越短越好！ 因?yàn)槿绻捎谀撤N原因發(fā)生這種情況，您必須覆蓋該新樣式， 您不必深入5個(gè)層次， 然后6 然后更多。
深度選擇器令人恐懼，人們最終使用！重要的。 ！當(dāng)您要覆蓋無法控制的內(nèi)聯(lián)樣式時(shí)，應(yīng)使用“重要”字樣。 否則， 這是一個(gè)危險(xiǎn)信號，表明您做的事情不正確。
現(xiàn)在， 當(dāng)然， 對于大型應(yīng)用程序，會(huì)有很多樣式， 這是完全可以理解的。 但是它總是那么大嗎？ 在SASS中擴(kuò)展類的錯(cuò)誤方式（通過mixin）會(huì)生成較大的選擇器鏈， 滾動(dòng)查看所有內(nèi)容都需要花費(fèi)幾秒鐘的時(shí)間。 適當(dāng)?shù)臄U(kuò)展名將大大減少該文件。 甚至可以將大小減小一倍。
包含的框架 其中只有少數(shù)幾個(gè)屬性正在使用也是大文件的常見原因。 將引導(dǎo)程序/基礎(chǔ)捆綁在一起， 字體很棒 動(dòng)畫。css和其他一些類似的框架/庫，最終您會(huì)得到一個(gè)巨大的文件，您將在其中使用約2％的文件。 清理， 保持整潔，只使用真正需要的東西。 很多時(shí)候甚至不需要框架。
引導(dǎo)程序 基礎(chǔ)， UIKit和所有其他框架都很棒！ 它們解決了一個(gè)實(shí)際問題，對Web開發(fā)社區(qū)非常有價(jià)值。 無需了解非常適合制作儀表板和站點(diǎn)的HTML或CSS。 但是不要這樣 開始編寫一些CSS，您會(huì)遇到一些問題。
您必須正確了解如何構(gòu)建它們以及如何包含它們
您必須閱讀他們的文檔才能找到他們提供的自定義設(shè)置和mixin。
您必須遵循他們的標(biāo)記，并教您的團(tuán)隊(duì)這樣做。
您必須真正了解如何擴(kuò)展和樣式化以創(chuàng)建獨(dú)特的視圖。
正確包含它們意味著您僅使用所需的內(nèi)容。 為了擁有這樣一個(gè)框架，而不是禁止您構(gòu)建任何自定義項(xiàng)， 您必須知道它的內(nèi)部運(yùn)作要好于平均水平。 并實(shí)現(xiàn)任何自定義設(shè)計(jì)， 您將必須修改設(shè)置和屬性。 然后編寫一些自定義CSS。 該自定義CSS可以覆蓋框架提供的所有內(nèi)容。
因此，如果真的不需要這樣的CSS框架， 但是仍然有一個(gè)沒有被正確地利用， 這是一個(gè)危險(xiǎn)信號，表明出現(xiàn)了問題。 當(dāng)您開始使用它時(shí)， 您很可能會(huì)在項(xiàng)目生命周期結(jié)束之前使用它。 因此，這是一個(gè)重要的決定。
這更多是初學(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)容增加了， 元素不會(huì)中斷。
在定義大小時(shí)，這種思維方式在整個(gè)應(yīng)用程序中仍然很重要。 每個(gè)屬性都必須考慮它。 理想情況下， 不要為內(nèi)容區(qū)域的寬度設(shè)置％， 因?yàn)槟菢拥脑?，您還必須編寫媒體查詢。
如果您有最大寬度， 當(dāng)您的瀏覽器縮小到最大寬度以下時(shí)， 內(nèi)容將填滿瀏覽器寬度，然后正?？s小。 別的， 您將不得不編寫該尺寸的媒體查詢。 然后針對網(wǎng)站上寫的其他任何自定義尺寸。 由于方法錯(cuò)誤，這增加了復(fù)雜性。 與我們已經(jīng)討論過的所有其他方面幾乎相同。
JavaScript可以創(chuàng)造奇跡！ 但這并不總是需要的。 您可以使用受良好支持的CSS來完成很多工作， 不需要功能（最好在以后自動(dòng)測試），也不需要您的其他FE成員也了解JS。
當(dāng)然， 有標(biāo)準(zhǔn)的切換功能， ：checked時(shí)，您可以在其中使用復(fù)選框輸入來更改樣式， 有可以輕松觸發(fā)的背景疊加層，還有諸如counter之類的屬性可以創(chuàng)建比簡單更多的屬性 ol> 列表。
這里的建議是首先尋找CSS解決方案。 假設(shè)您要建立一個(gè)彈出窗口。 它顯示在中間（位置：固定）。 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中，您可以編寫另一個(gè) 股利> 有100vw， 彈出窗口下方為100vh大小和z-index。 然后，您只需在JS中定位該div， 這是單線的。
另一個(gè)例子-您想要一個(gè)可以放置在內(nèi)容中的按鈕， 這將“擴(kuò)展”其后的所有內(nèi)容。 簡單的CSS， JS有點(diǎn)復(fù)雜。 使用CSS，您可以執(zhí)行以下操作：
標(biāo)簽。button-直觀地設(shè)置按鈕樣式。
Input:not(:checked) ~ * { display: none} - hide everything after it in the same container.
那個(gè)“在同一個(gè)容器中” 您需要在JS中使用自定義邏輯。 您還需要選擇所有元素， 這需要遍歷DOM樹。 然后將CSS樣式應(yīng)用于它們， 最終以style =””標(biāo)簽結(jié)尾， 反過來又需要！很重要，如果由于某種原因您必須解決這些問題。 在CSS中， 謝天謝地， 這非常簡單。
成為優(yōu)秀網(wǎng)頁設(shè)計(jì)師的道路
如你看到的， 這些是很少見的常見問題。 為了涵蓋所有內(nèi)容， 需要一本書。 但是希望 它們將為您提供一個(gè)良好的起點(diǎn)，并提醒您考慮由于錯(cuò)誤的方法而可能引起的任何潛在問題。 查找此類問題需要大量的經(jīng)驗(yàn)和大量的閱讀經(jīng)驗(yàn)。 如果您在這里得出結(jié)論， 那么您在閱讀的正確道路上， 現(xiàn)在該練習(xí)了！
長期發(fā)展， 支持， 和您的WordPress平臺的創(chuàng)新。 DevriX為中小型企業(yè)和快節(jié)奏的初創(chuàng)企業(yè)提供技術(shù)合作伙伴關(guān)系。 我們構(gòu)建WordPress解決方案并擴(kuò)展平臺，最多可生成20個(gè)，000，每月000次網(wǎng)頁瀏覽。
瀏覽更多：發(fā)展
DevriX的創(chuàng)意主管和前端開發(fā)人員
