一個有 15 個頁面的項目怎麼規範 css 樣式？

01-14

現在我這邊有兩種思路。
第一：就是把整個項目的css樣式都寫在同一個樣式文件里。好處：只請求一次. 壞處：樣式越多越亂，怕class命名衝突，之後難以維護
第二：每個頁面都單獨一個樣式文件，打開相應的頁面載入相應的樣式文件，因為是用angularjs開發，用的是路由載入。每個樣式文件都放在模板里的。好處：易維護，防止命名衝突，可讀性好。壞處：請求太多
不知道以上哪個方法比較好？請各位說說。。或者你們有更好的方式請分享下。。謝謝

如果是我，做15個頁面，不會先考慮 CSS 樣式文件怎麼分割，而是先通讀視覺稿，把所有類似的、可復用的部分劃分出來，抽出結構和樣式做成模塊。達到一段 HTML 代碼、一段 CSS 樣式，粘貼到任意位置都正常。

抽出模塊之後，再思考怎麼管理就很方便了。

在開發階段，可以用 SCSS 等來開發，這樣可以直接將模塊分成單獨的 CSS 文件，import 進來，比較清晰。

補充幾個資料：

1. 類似項目的經驗總結近期幾個項目總結

2. 推薦的HTML大體框架結構命名，方便填充分好的模塊 section-wrap 和 section 的 HTML 結構和命名方式

3. Sass 資料 Sass 進階 | 於江水

寫一個頁面，看起來不頭大嘛？一般來說用less sass來import即可，所有css都組件化即可……

構建一個Angular項目的CSS大體上基本都是，建立相應模塊，在模塊的基礎上建立對應的CSS，同時需注意CSS的重複使用，使用varibles，mixins和extend Extending Sass Without Creating A Mess等，對這一類的CSS需抽離出來。

同時，最好建立一個這個項目專屬的Grid system而不是用Bootstrap，個人比較喜歡的一個輕量級的庫Jeet Grid System

例一：

將對應的Scss放到相應的Angular的模塊當中，然後統一用compass（gruntjs/grunt-contrib-compass · GitHub）打包並且編譯成單個CSS，

如圖，只有與booking這個模塊相關的Scss才可以放在booking/css這個文件夾中。同時，其他通用Scss文件應放在主文件下，在這個例子中是app文件夾。

還有一種方式，是根據每一個頁面來建立相對應的CSS而不是模塊，這種方法更適用於靜態網站（俗稱：切圖）上。儘可能模塊化每一段CSS，遵循BEM規範http://bem.github.io/bem-method/html/all.en.html，views這個文件夾里就是把每個頁面的CSS獨立開了，像在common這個文件里的Scss都是可以被重複利用的。

例二：

然後import所有Scss到styles.scss里，最後只要Compass編譯這一個文件就行了：

@import "jeet/index";


/* -- reset -- */
@import "reset/reset";
/* mixins */
@import "mixins/*";
/* common */
@import "common/*";
/* partials */
@import "partials/*";
/* views */

@import "views/*";

/* fontawesome */ @import "fontawesome/*";

Compass config文件設置：

require "compass/import-once/activate" require "sass-globbing" # Require any additional compass plugins here.

# Set this to the root of your project when deployed: http_path = "/" css_dir = "css" sass_dir = "scss" output_style = :compressed preferred_syntax = :scss

希望能夠幫助到你

要是我就兩個css文件，一個base.css存共用的以及通用模塊的樣式，再每個頁面存獨立的樣式。

當然，使用sass、postcss等工具進行模塊化再import進來就更好了。

寫的時候分開寫，上線時用gulp壓縮成一個文件

很明顯

寫在同一個css比較好點，其實公用的會比較多，不用模塊化

主要還是看這幾個頁面相似度如何，很相似的話，建議用兩個文件，一個公用，一個把每個頁特定的樣式整合；

如果差異很大，還是都分開寫吧，一個頁一個樣式；

less啥的我不會就不瞎支招了

就一個CSS文件就行

可以用gulp等工具將css何必！也可以用sass寫import到一個文件

每個頁面單獨寫個CSS的話，是不是還不如直接寫在頁面里方便

CSS Module