如何组织CSS表格

时间:2013-09-09 09:55:51

标签: css

我希望开始讨论,以便在一个非常大的项目中组织样式表,并与一大群开发人员一起工作。

这里有一种可能的方法就是只使用注释和区域组织一个包含所有样式的工作表,不幸的是,即使使用带有标签的单行写入方法,这个工作表也会变得非常大,甚至SVN提交和更新都会变得更加混乱

所以我们认为在不同的表格中划分样式会更好。我们不确定如何组织这个,因为我们有不同的想法。

  • 一个可能的想法是组织它的类型:colors.css,fonts.css,forms.css,...
  • 另一个想法是按功能/行为对它们进行分组:navigator.css,menu.css,warnings.css,errors.css,...
  • 我们也可以按页面组织它们:login.css,contact.css,home.css,...
  • 甚至可以将这三种想法结合起来。

现在令我担心的是,我们不希望将所有样式添加到每个页面,因为并非所有页面都需要所有样式,我们真的担心性能,因为我们的项目每天被数百万用户使用。我们当然会在部署后对其进行压缩,但即便如此,我们认为每页仅加载所需的更明智。

在这样的情况下,我担心其他开发人员没有按照正确的顺序加载样式,因为根据页面或页面组需要加载不同的工作表,他们可能会搞砸了这样做级联将失败(想象他们在global.css之前加载menu.css,global会覆盖一些菜单样式!!!)。

现在我们可以去一张纸,我们可以随时加载所有这些,或者我们可以使用一些想法,我们喜欢使用字母前缀来告诉开发人员加载顺序:

  • a_global.css
  • a_forms.css
  • b_region1.css
  • b_anotherregion.css
  • c_page.css

但说实话看起来有点可怕。所以现在我想知道是否有某种流行的css架构,或者至少有一些好的想法可以用于我们的项目。

非常感谢!!

2 个答案:

答案 0 :(得分:2)

  1. 使用预处理器,这样您就可以根据需要组织源文件。 (我们的团队使用LESS,因为我们已经开始使用Twitter Bootsrap并且卡住了)。编译后的CSS文件不应受版本控制,每个开发人员都应编译自己的版本进行测试。我建议编写一个grunt任务来编译缩小版本以进行生产。我会采用以组件为中心的方法(表格,导航,网格,排版等)。

  2. 使用预处理器为您提供变量和混合的强大功能。你可以保存像variables.less和mixins.less这样的文件来定义常见的样式。所以当你的蓝色变成浅蓝色时,你只需在一个文件中更改它。

  3. 包含所有CSS的大文件应该没问题,因为它是由浏览器缓存的,因此它最大限度地减少了对服务器的HTTP请求。当特定页面有许多不常见的元素时,页面特定的样式表就可以了。

  4. 创建样式指南html模板,其中包含您可以想到的每个常见元素。标题,链接颜色,列表,照片缩略图,表单输入,网格配置,手风琴等。当您需要创建新组件时,将其添加到此模板,修改样式表,查看它是否破坏任何其他元素以及它是如何与休息。然后使用这些代码段创建特定页面。

答案 1 :(得分:1)

SASS或LESS

这有助于您轻松管理代码。 (变量,混合等)

分为多个文件计数。

总是一个好主意。如何划分。 我建议基本上每页划分它们。

但是 - 排除一般样式以分隔将包含在任何地方的文件。

顺便说一下,单个文件并不意味着性能低下。你确定10个小页面请求比一个更大文件请求更快吗? 此外,这些文件将被缓存在Web浏览器中,因此一个文件看起来不是一个坏主意。