管理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样式都在每一个标记的基础上应用，所以如今我尝试将其移至更多外部样式中，以帮助未来进行任何更改。 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文件中的数据变得愈来愈困难。 web

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选择器： app

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文件至关直观且易于阅读。 ide

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. 这样，未来可能在此站点上工做的其余我的也将参与使用良好编码实践的实践，而没必要像我之前那样去实践。 网站

解决方案：