构造CSS代码的最佳实践

Question

我正在为中型Web应用程序创建设计。这是我第一次，我的工作场所没有既定的设计流程。以前的项目是小型内部应用程序，而后端开发人员使用的最小设计足以使内容对齐。

我开始分别为每种类型的页面进行设计，并为每种类型的页面创建一个新的CSS文件，例如：一个单独的输入表单，另一个用于搜索界面，依此类推。我还制作了一个大文件，其中包含各处使用的元素（页眉，页脚，按钮，警告消息等）。这是我能想到的唯一合理的结构。

我已经有一段时间了，我现在注意到我已经造成某种混乱。当我有一个元素并需要更改其样式的定义时，我总是必须通过Inspect Element和Visual Studio的搜索功能，这仍然是相当有效的。但我经常发现自己在样式表中查看定义，不知道它们的用途，或者它们是否仍在使用 - 也许我们已经抛弃了使用它们的元素，或者它们是试图解决一个有更好解决方案的问题。

我已经在努力为我的课程提供良好的语义名称，但这还不够，有时甚至是不可能的 - 我使用的每个解决方法似乎都给我留下了像.centeringWrapper这样的名字。

什么是一个好的，可行的CSS代码结构，可以防止出现这些问题？我可以用什么原则来安排代码？

• 如何将代码分成文件以便找到正确的文件？
• 如何在文件中构建代码以便我可以将我的方向保留在文件中？
• 如何保持不同@media块中使用的同一元素的不同定义的概述？

欢迎任何使我的工作变得不那么混乱的建议。

Answer 1

构建CSS的最佳实践是构建CSS。我的意思是有一个系统。你的系统是什么并不重要，只要它对你和你的团队有意义，人们可以持续地维护它（至少在合理的时间内）。

我可以用一种方式告诉你不这样做，但不是用自己的CSS分别设计每个页面。

我认为你已经想到了这一点，但值得重复。

现在，有时我违反了这条规则。但它很少见，它通常出现在以营销为中心的小型网站上，我只有4个截然不同的页面。但是，一般情况下，您希望在所有页面中尽可能多地重复使用CSS。

实现这一目标的一种方法是通过处理CSS框架来开始预先存在的结构。一个常见的是Bootstrap，但实际上有几十个和几十个选项。