隨著前端技術的不斷發展，面對日益復雜的項目需求，我們需要更加有效的管理我們的CSS代碼。模塊化CSS的出現，為團隊協作和代碼重用帶來了很大的便利。

模塊化CSS的設置有很多種方法，接下來我們主要介紹BEM(Block Element Modifier)和SMACSS(Scalable and Modular Architecture for CSS)。

/*BEM*/
.block {
/*block styles*/
}
.block__element {
/*element styles*/
}
.block--modifier {
/*modifier styles*/
}
/*SMACSS*/
/*Base rules*/
body {
font-size: 16px;
}
/*Layout rules*/
.container {
width: 960px;
margin: 0 auto;
}
/*Module rules*/
.product__title {
font-size: 18px;
font-weight: bold;
}
/*State rules*/
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

BEM將CSS分為block、element、modifier三個部分，塊(block)用來表示一個獨立的模塊，元素(element)用來表示塊中的某個元素，修改器(modifier)則是對塊或元素的修飾。

SMACSS將CSS分為base rules、layout rules、module rules和state rules四個部分，base rules定義了基本的樣式，layout rules定義頁面結構和布局，module rules定義每個模塊的樣式，state rules定義模塊狀態下的樣式。

無論是使用BEM還是SMACSS，都需要在團隊內建立一套統一的規范。只有良好的規范和約定，才能提高團隊之間的協作效率。