模塊化CSS 讓你愈加有效地去辦理

　　 模塊化 CSS 是一種在前端開發(fā)中非常實用的技術(shù)，它能夠顯著提升代碼的可維護性和可擴展性。在剛學(xué)習(xí)CSS初期，就觸摸了“模塊化CSS”這樣的概念，不過，一向沒有很好的了解。說起來，理由很簡略：由于幾乎一切的代碼都是為了博客的設(shè)計，而像博客這么小的架構(gòu)，CSS文件根本不必多，由于本身代碼量就小，使用不同表現(xiàn)形式的頁面模板并不多，少反而更便利辦理。所以，對于模塊化CSS的了解很亂，直接導(dǎo)致自己一向認(rèn)為下面的分法是非常合理的：

 

 

　　其實不然，近作業(yè)，觸摸了公司的網(wǎng)站，leader要自己寫CSS的寫作標(biāo)準(zhǔn)，以及一些HTML的統(tǒng)一標(biāo)準(zhǔn)；而且寫了新的頻道/頁面/賣場。才發(fā)現(xiàn)，原本，上面的分法仍是太理想化了。以個人來說，個人認(rèn)為能夠用下面的切割法。先寫下，然后，讓咱們比照這兩種分法，找到更好的處理CSS文件辦理的適宜的CSS模塊化分法：

 

 

　　咱們能夠看到，不同的有三個CSS文件。第一種分法是種不錯的做法，但辦理起來比較麻煩，雖然是“模塊化” 了，把表現(xiàn)的內(nèi)容的樣式分隔。但由于每個人都不或許百分百了解每個CSS文件里面的內(nèi)容，所以，或許導(dǎo)致下面的問題：

 

　　一、功率問題與終目的

 

　　在網(wǎng)站內(nèi)容上面，假如改某一個區(qū)域的內(nèi)容，或許要幾個CSS都改。這樣一來，原本簡略的一個修改，開端變得復(fù)雜起來。而且，假如多個都改，或許會使咱們忽略了某些東西，又需求進(jìn)一步調(diào)試，這樣不僅肯使終目的實現(xiàn)拖延，仍是一個功率的問題。

 

　　二、調(diào)用盡或許少的CSS文件

 

　　大多樓情況下，一個網(wǎng)站都是分成頭部，中部和底部，而且，一般，要做新的頻道/頁面之類的東西，都不會變化頭部和底部，而只是變化中間部分。這樣一來，一切CSS文件都要調(diào)用，由于，HTML和CSS的模塊化并不共同。這樣，就會導(dǎo)致服務(wù)器接受更多的壓力。這是一個方面。另一個方面是，假如新頁面中某些元素與其他頁面有抵觸，咱們或許要搞一大堆關(guān)于優(yōu)先性挑選的代碼，增加代碼量。這些都不是咱們想要的。這就為什么要把header.css和 footer.css分隔來的原因。

 

　　三、多人合作上的問題

 

　　假如咱們多個人在作業(yè)，大家的分工或許是，有人完結(jié)頭部的導(dǎo)航，有人完結(jié)底部的查找條，有人完結(jié)中部新頁面的構(gòu)建。這樣一來，大家都一起在改幾個文件，而且，改的東西不同。假如要更新到服務(wù)器，就要先比照，再更新。（當(dāng)然，現(xiàn)在有版別辦理這樣的軟件。但是，一起作業(yè)的話，版別也是一個問題，要信任，或許更新永遠(yuǎn)都改不上改動。）

 

　　結(jié)語：

 

　　當(dāng)然，上面的分法，只是一個簡略的模型。不同網(wǎng)站的架構(gòu)，或許需求更細(xì)化的分法。這里需求提示的一點是，模塊化CSS，咱們應(yīng)該時間清晰，咱們是為了便利辦理，便利修改，便利多人合作，而不是簡略的切割。假如說有什么主張，我想，CSS的模塊化，應(yīng)該盡量與HTML的模塊化相共同。這里的共同說的是，無論是在文件的切割上，仍是在CSS內(nèi)容的切割上，與HTML的模塊化共同。這將會更有利于咱們的作業(yè)�？傊�，模塊化 CSS 是一種強大的工具，能夠幫助開發(fā)者更高效地管理樣式代碼，提高開發(fā)效率和項目質(zhì)量。