淺談我所見的CSS組織風格
阿新 • • 發佈:2018-02-20
color 後處理 time 分布 抽取 gin variables cor pic
1.簡單組織(見習級)
projectName
├─css
| └style.css
優點:簡單,單一文件,適合一些簡單項目。
缺點:過度集中,沒有模塊化,無法適應大型項目。
2.公共組織(見習級)
projectName
├─css
| ├─index.css
└base.css
優點:抽取公共樣式,適合一些小中型項目。
缺點:重用代碼低,沒有模塊化,無法適應大型項目。
3.頁面集中組織(見習級)
projectName ├─css | ├─about.css └index.css
優點:按頁面組織,集中存放在css目錄中,適合一些中小型項目。
缺點:重用代碼低,沒有模塊化,無法適應大型項目。
4.頁面分布組織(見習級)
projectName ├─page| ├─index | | └index.css | ├─about | | └about.css
優點:按頁面組織,分布存放在對應目錄中,針對性管理頁面樣式,適合一些中小型項目。
缺點:重用代碼低,沒有模塊化,無法適應大型項目。
5.分離插件(框架)與源碼組織(見習級)
projectName ├─css | ├─index.css| ├─plugins | | └jquery.timepicker.min.css | ├─libs | | └bootstrap.min.css
優點:分離插件(框架),區分第三方與本項目的樣式,適合一些中小型項目。
缺點:重用代碼低,沒有模塊化,無法適應大型項目。
6.組件組織(資深級)
projectName ├─css | ├─page | | └index.css | ├─layout | | ├─desktop.css | | └moblie.css | ├─common | | ├─footer.css | | └head.css
優點:抽取組件樣式,重用代碼高,組件模塊化,適合一些中大型項目。
缺點:引入過多的css標簽,不適合小型項目,使用會過於繁瑣。
7.精細組件組織(資深級)
projectName ├─css | ├─page | | └index.css| ├─layout | | ├─desktop.css | | └moblie.css | ├─common | | ├─footer.css | | ├─head.css | | ├─tab | | | └tab.css | | ├─button | | | └button.css
優點:更加細化抽取,功能組件樣式, 重用代碼很高,組件模塊化,適合一些中大型項目。
缺點:引入過多的css標簽,不適合小型項目,使用會過於繁瑣。
8.預後處理組件組織(宗師級)
projectName ├─scss | ├─vendor | | ├─font-awesome-sass | | | ├─font-awesome.scss | | | ├─_animated.scss | | | ├─_bordered-pulled.scss | | | ├─_core.scss | | | ├─_fixed-width.scss | | | ├─_icons.scss | | | ├─_larger.scss | | | ├─_list.scss | | | ├─_mixins.scss | | | ├─_path.scss | | | ├─_rotated-flipped.scss | | | ├─_screen-reader.scss | | | ├─_stacked.scss | | | └_variables.scss | ├─partials | | ├─page | | | └index.scss | | ├─layout | | | ├─desktop.scss | | | └moblie.scss | | ├─common | | | ├─footer.scss | | | ├─head.scss | | | ├─button | | | | └button.scss | ├─modules | | ├─funtion.scss | | ├─mixins.scss | | ├─reset.scss | | └variables.scss
優點:更加細化抽取,功能組件樣式, 重用代碼很高,組件模塊化,解決引入過多的css,適合一些中大型項目。
缺點:不適合小型項目,使用會過於繁瑣。
PS:具體問題具體分析,合理的組織css目錄有利於提高開發效率,便於版本叠代。
淺談我所見的CSS組織風格