如何创建和管理大型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文件.