如何创建和管理大型 CSS 项目？答案

【问题标题】：How to create and manage large CSS projects?如何创建和管理大型 CSS 项目？
【发布时间】：2014-06-28 17:22:04
【问题描述】：

我是网页设计的新手。我有查看网页源代码的习惯，我看到的 CSS 文件中充斥着大量复杂的 CSS 代码。

我学过 CSS，包括 CSS 3，但我经常想知道设计师如何创建如此庞大的 CSS 文件？需要多少时间？他们是通过自己输入代码来完成所有的编码，还是在某些程序的帮助下生成代码？

【问题讨论】：

欢迎。根据发布规则，您的问题“离题”有两个可能的原因，“太宽泛”和“主要基于意见”。见：stackoverflow.com/help/dont-ask
这些宽泛的问题通常对刚接触 Web 开发的初学者非常有用。
完全正确 - 如果人们甚至不知道谷歌的内容或工作原理，他们应该如何学习现代网页设计？唯一的起点是一个广泛的问题。他们没有让 StackOverflow 成为一个欢迎新用户的地方，而是获得了 5 票反对票，并且他们的问题被锁定了。
@Bill：“人们应该如何通过他们喜欢的任何方式了解” - 其他地方。这不是一个初学者或基础知识网站：它是一个面向“专业人士和爱好者”的网站。
@DavidThomas - 但它得到了客观的回答。现代前端开发人员使用了一些工具链，这是提供的答案，对提问的人很有帮助。这是为什么这么多人停止回答问题的一个典型例子——我们尝试提供帮助，然后被告知问题不够好，不值得回答。简直太荒谬了，你的第一条评论就是 StackOverflow 模组队的所有问题，你甚至不知道这个网站是干什么用的。

【解决方案1】：

大多数前端开发人员使用 SASS 和 LESS 等工具编写 CSS。这些工具有助于减少一些冗长并帮助构建代码。我们不只是编写一个巨大的 CSS 文件，您看到的是组合和缩小许多文件的结果 - 通常称为构建过程（Gulp 等工具在这里提供帮助）。但是，是的，仍然涉及很多打字。

谷歌 SASS、LESS 和 Gulp 以了解更多信息。

【讨论】：

我们将来需要它们吗？

【解决方案2】：

由于多种原因，CSS 代码最终会变得庞大而复杂。样式表可能是最容易变得一团糟的文件。并非所有人都好。我可以尝试解释一下为什么我的代码经常不必要地冗长。

首先，CSS（Cascading Style Sheets）允许新的代码行替换旧的代码行，例如第12行的规则：

body#wrapper {
    width: 1200px;
}

可以在第 4123 行更改为：

body#wrapper {
    width: 900px;
}

不删除之前的规则。这会导致大量的懒惰，因为编写代码的人不会删除以前过时的规则。

此外，许多开发人员从 Twitter Bootstrap 这样的框架开始。这提供了多行 CSS 代码。大多数人不是自定义现有代码并删除未使用的规则，而是保持现有代码不变，并在文件末尾添加任何自定义。

不仅看起来不好，而且优化不好的 CSS 文件也会影响您的网站。许多网站和应用程序不遗余力地优化其 CSS 文件。为了避免创建混乱的 CSS，最好使用 LESS 和 GruntJS 之类的工具。这就是我一直在做的尝试让我的 CSS 文件更小。 LESS 允许您使用 mixins 和变量来更好地控制样式表，而 Grunt 可用于连接许多较小的 CSS 文件。

【讨论】：

感谢@nicholaschris 为您提供宝贵的答案。

【解决方案3】：

我使用 Firefox 或 chrome。我找到要更改的元素，然后从下拉菜单中右键单击>“检查元素”。然后我通过为该元素指定的检查器右侧的 CSS 列表更改内容，直到我做对为止。然后我复制我的更改并将它们放入我的 CSS 文件中，保存并刷新页面以确保它看起来相同

为我的访问者使用的所有浏览器进行设计可能会很麻烦，尤其是使用 ie。但是我创建了一些特定的 CSS 文件来解决浏览器给我的问题。

许多设计师可以不用看就可以编写所有代码，我可以不看就做一些事情，但是对我来说，随着我的更改更容易看到发生了什么

【讨论】：

实际上有更简单的方法来进行 Web 开发。您需要查找与 gulp 构建工具一起使用的“实时重新加载”，例如 github.com/vohof/gulp-livereload。这使您可以更改代码文件、保存并让您的网站 CSS 自动刷新，甚至无需重新加载页面。这很神奇:)
我一定会看的！非常感谢:-)
@Bill 仅适用于未来的浏览器，该功能也可以在带有 Web Essentials 的 Visual Studio 中使用（每个使用 VS 的 Web 开发人员都应该已经安装）。我不确定浏览器的兼容性，但它可以在 Chrome 中运行，我认为是 IE。
很高兴知道，我从未使用 Visual Studio 进行 Web 开发。
我也没有。谢谢你的信息！

【解决方案4】：

开发人员通常使用工具来编写 css 代码。这些是高级编程工具，可帮助开发人员编写自动完成、智能感知、颜色选择器，图像选择器等。这些工具既可以免费使用，也可以付费使用。

几个名字是：Dreamweaver、VisualStudio、Notepad++...

您还可以在任何最新的浏览器中编码，例如 chrome 或 firefox 甚至 ie11。

【讨论】：