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

Question

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

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

Answer 1

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

Google SASS，LESS和Gulp了解更多信息。

Answer 2

由于多种原因，CSS代码最终会变得庞大而复杂。样式表可能是最容易变成混乱的文件。并非所有这些都很好。我可以尝试解释为什么我的代码经常会不必要地长时间结束。

首先，CSS（层叠样式表）允许新的代码行替换旧代码行，例如，第12行中的规则：

body#wrapper {
    width: 1200px;
}

可以在第4123行更改为：

body#wrapper {
    width: 900px;
}

不删除之前的规则。这会造成很多懒惰，因为编写代码的人不会删除以前过时的规则。

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

它不仅看起来不太好，而且经过严格优化的CSS文件会影响您的网站。许多网站和应用程序都竭尽全力优化他们的CSS文件。为了避免创建混乱的CSS，最好使用LESS和GruntJS之类的工具。这是我一直在尝试保持我的CSS文件更小。 LESS允许您使用mixins和变量来更好地控制样式表，Grunt可用于连接许多较小的CSS文件。

Answer 3

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

设计我的访问者使用的所有浏览器可能是一个婊子，尤其是ie。但是我创建了特定的CSS文件，以便解决浏览器给我的问题。

许多设计师可以在不看的情况下对所有内容进行编码，我可以在不看的情况下做一些事情，但对我而言，更容易看到发生了什么以及我的更改

Answer 4

开发人员通常使用工具编写css代码。这些是高级编程工具，可以帮助开发人员编写样式，如自动完成，intellisense， 颜色选择器，图像选择器等。这些工具免费提供，也可以付费使用。

很少有名字：Dreamweaver，VisualStudio，Notepad ++ ......

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