現在在前端開發中，CSS模塊化已經成為了一種流行的開發方式，這種模塊化能夠讓開發者更加高效、靈活地開發項目。下面我們就來看看CSS模塊化的一些實現方式。

1. OOCSS(Object-Oriented CSS)

.button {
display: inline-block;
font-weight: bold;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: #dfdfdf;
border: 1px solid #ccc;
border-radius: 4px;
text-shadow: 0 1px rgba(255, 255, 255, 0.75);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.25), 0 1px rgba(0, 0, 0, 0.1);
}

OOCSS 是一種以面向對象編程(OOP)為基礎的 CSS 樣式框架，它注重組件的復用和拓展，將頁面中的每個組件都抽象為某種類別或對象，然后共同使用樣式規則來定義相同的風格。這使得每個組件擁有自己的類，而CSS文件則可以讀得更容易，且更加人性化。

2. BEM(Block-Element-Modifier)

.button--active {
background-color: #0070c9;
border-color: #005ea3;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.15);
}

BEM 將開發的元素分為塊(block)、元素(element)、修飾符(modifier)三種類型，每個部分都對應具體的功能，充分體現了模塊化的思想。其中塊(block)是指頁面視覺上獨立的部分，元素(element)是指塊的組成部分，而修飾符(modifier)則是關于塊或元素的的狀態或變化，加了修飾符的元素或塊要重新定義樣式。

3. SMACSS(Scalable and Modular Architecture for CSS)

.btn {
display: inline-block;
font-weight: bold;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
}
.btn-primary {
background-color: #428bca;
border-color: #357ebd;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.15);
}

SMACSS是一種CSS代碼組織規范，它強調了CSS的可擴展性和可重用性，即CSS模塊化，同時提供了明確的指導方針，使開發人員能夠更加有效地構建、管理和組織 CSS 代碼。在 SMACSS 中使用不同的規則分類樣式，比如基礎樣式、布局樣式、模塊樣式等，使代碼組織更加清晰，同時也更加靈活。