每個頁面都新建了一個css，這樣會不會帶來麻煩？後端的也總說這樣不利於修改，一改就要一路改過去好麻煩的說。

因為自己很多頁面都用了相同的類名，所以怕夾雜在一起會產生樣式的衝突導致頁面混亂。想聽聽大家的建議。

---

給每個頁面的最外層容器設好單獨的 class 就行了，比如：

&
&

&
&


.module1 .title {
/* 模塊1標題樣式 */
}

.page1 .title {
/* 頁面1標題樣式 */
}

.page2 .title {
/* 頁面2標題樣式 */
}


如果有用 CSS 預處理器，那麼用嵌套的寫法會更簡潔一些。

---

頁面最外層容器里把 page id 帶進去好了

---

後端本來就不應該動他們不懂的事情。

最佳實踐是 所有頁面有一個通用的common.css 。然後頁面單獨的樣式每個頁面一個文件，或者是每個頁面一個容器id，以id為第一選擇器，寫在一個文件里。

---

不利於修改什麼的……

有notepad++這樣的神器批量修改還是很簡單的（在notepad++中，先關掉所有文件，然後在資源管理器把css文件批量拖進notepad++，然後在替換時選擇`替換所有打開文件`

我的習慣也是公共部分有公共的樣式，每頁自己也有一個CSS文件（因為做的是企業展示網站）。

---

最簡潔的方式就是一個base(重置+通用模塊模板)，或者這分成兩個文件也行，然後每個頁面一個獨立的css文件，給單獨id的方式我覺得不好，如果css很大了，成千上萬行，但是一個頁面只要其中一兩行，這樣就感覺不好。

---

把 CSS 全稱寫出來：
Cascading Style Sheets。「
層疊樣式表 」
或 「
級聯樣式表 」。理解了層疊的意思就OK了。

把相同的部分提取出來，通用：

.label-warning{
background-color:#f89406;
}
.label-warning:hover{
background-color:#c67605;
}
.label-success{
background-color:#468847;
}
.label-success:hover{
background-color:#356635;
}


在每個頁面單獨設置 class 或者 id：

/* 每個頁面通用的 */
.content {
padding: 10px;
border-radius: 0 0 6px 6px;
}
/* 首頁 */
.homepage .content {
color: #fff;
}
/* 列表頁面 */
.list .content {
margin: 0px;
}
/* 關於我們頁面 */
.about .content {
margin: 0 10px;
}


---

可以為每個頁面寫一個CSS，而且這樣也有好處：載入CSS文件更快，不同頁面之間也不用擔心CSS命名衝突。

但是，為了解決「每個頁面都需要修改」的問題，你應該把所有頁面共同的部分（比如：頁頭、頁腳、大框架等）的CSS分離出來到一個單獨的文件，每個頁面都載入共同的這個CSS和該頁面自己的CSS文件。

---

use css pre-compile tools: less, sass, stylus etc.

舉個栗子：

page1.styl =&>

@import "tab"

@import "list"

@import "pagenav"

...

page2.styl =&>

@import "tab"

@import "btn"

@import "page2theme"

---

網站的架構是根據你產品的需求來制定的。如果你的網站更新頻率不高，沒有海量的訪問，獨自開發。全站只留一個g.css又何嘗不可，所有頁面都引入這個g.css。然後在這個css裡面根據功能分類：reset，base(個人常用的一些類，居中，清浮動，文字隱藏等)，common（網站組件級，公共模塊等），後面就是各個具體的頁面。如果你把所有頁面都寫在1個css裡面如果命名有衝突，在寫具體的頁面的時候肯定是能夠發現的。當然也可以給每個頁面外層給一些類來區分，但是可能會造成頁面裡面的css嵌套會比較多，當然健壯性和複雜性是很難兩全其美。還有就是你的命名風格和經驗也是很重要的

---

其實我沒有理解你的問題，有相同的類名，為嘛不提取呢？是不是這些類名雖然相同，但是裡面的樣式不一樣呢？。解決辦法上面的都說的不少了，提取公共的base.css,然後每個頁面p1.css,p2.css......這樣就是了！

---

每個頁面一個 css很麻煩 也無太大的必要性

就算同樣的類名，但也應該有不同的id

得票第一的總結很好

---

這個一點也不會影響後端，反而更利於模塊化管理，修改樣式不會牽扯後端什麼事。

難道後端需要手動修改樣式版本號？

如果後端不能滿足這樣的修改需求，那後端肯定要對前端架構做適當的架構調整。

---

推薦閱讀：