管理CSS爆炸 - Managing CSS Explosion

問題：

I have been heavily relying on CSS for a website that I am working on. 我一直很是依賴CSS來開發我正在工做的網站。 Right now, all the CSS styles are being applied on a per tag basis, and so now I am trying to move it to more of an external styling to help with any future changes. 如今，全部CSS樣式都在每一個標記的基礎上應用，所以如今我嘗試將其移至更多外部樣式中，以幫助未來進行任何更改。

But now the problem is that I have noticed I am getting a "CSS Explosion". 可是如今的問題是，我注意到我遇到了「 CSS爆炸」。 It is becoming difficult for me to decide how to best organize and abstract data within the CSS file. 對我來講，決定如何最好地組織和抽象CSS文件中的數據變得愈來愈困難。

I am using a large number of div tags within the website, moving from a heavily table-based website. 我正在網站中使用大量的div標籤，而這些標籤是基於表格的網站。 So I'm getting a lot of CSS selectors that look like this: 所以，我獲得了許多以下所示的CSS選擇器：

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

It's not too bad yet, but as I am a beginner, I was wondering if recommendations could be made on how best to organize the various parts of a CSS file. 還算不錯，可是做爲個人初學者，我想知道是否能夠就如何最好地組織CSS文件的各個部分提出建議。 I don't want to have a separate CSS attribute for every element on my website, and I always want the CSS file to be fairly intuitive and easy to read. 我不想爲網站上的每一個元素都擁有單獨的CSS屬性，而且我一直但願CSS文件至關直觀且易於閱讀。

My ultimate goal is to make it easy to use the CSS files and demonstrate their power to increase the speed of web development. 個人最終目標是簡化CSS文件的使用並展現其強大功能以提升Web開發速度。 This way, other individuals that may work on this site in the future will also get into the practice of using good coding practices, rather than having to pick it up the way I did. 這樣，未來可能在此站點上工做的其餘我的也將參與使用良好編碼實踐的實踐，而沒必要像我之前那樣去實踐。

---

解決方案：

參考一： https://stackoom.com/question/9S8U/管理CSS爆炸
參考二： https://oldbug.net/q/9S8U/Managing-CSS-Explosion