CSS模塊化(CSS Module)是一種將樣式文件拆分成多個獨立模塊,從而實現樣式復用、可維護性和代碼重構的技術。
阮一峰在其博客中介紹了CSS模塊化的基本概念和實現原理,主要包括:
/* .css */ /* 定義一個名為 button 的模塊 */ .button { color: #fff; background-color: #007bff; border-color: #007bff; border-radius: .25rem; padding: .375rem .75rem; font-size: 1rem; } /* 組合 button 模塊 */ .primary { composes: button; box-shadow: none; } .secondary { composes: button; background-color: #6c757d; border-color: #6c757d; }
上述代碼定義了一個名為 button 的模塊,其中包含了按鈕的樣式。在使用時,可以通過 composes 屬性引用 button 模塊,并在其基礎上進行擴展,例如定義 primary 和 secondary 樣式。
通過CSS模塊化可以有效地解決CSS樣式的重名和全局污染問題,提高了樣式的可維護性和代碼的可讀性。同時,也可以實現樣式的組合和擴展,使得代碼更加靈活。
上一篇css模擬3d