您如何管理大型 ruby on rails 应用程序中的 css 样式表文件和包含项？答案

【问题标题】：How do you manage css stylesheet files and inclusions in a large ruby on rails application?您如何管理大型 ruby on rails 应用程序中的 css 样式表文件和包含项？
【发布时间】：2011-08-18 23:15:41
【问题描述】：

假设您不使用框架，您应该如何管理大型 ruby on rails 应用程序中的 css 文件和包含的组织？自然地，您将拥有自己的应用程序级别样式（例如 reset.css、applcation.css）。但在那之后最好的方法是什么？我可以看到使用特定于控制器的表格或更精细的特定于视图的表格。还有其他明智的选择吗？有什么好处和坏处？

顺便说一句，我现在正在使用 3.1 之前的 Rails，似乎包含资产管道可能会影响这里的答案 - 但很高兴听到来自资产管道之前或之后的解决方案.

谢谢！

【问题讨论】：

明智的做法，假设您没有使用框架，可能是重新考虑您的决定并使用框架。开个玩笑，大型项目从 CSS 框架中获得的好处是巨大的。代码重用、清晰的（如果你做得对的话）关注点分离、内置的连接/压缩，不胜枚举。是的，sass + rails 3.1 将为您回答这个问题。
@numbers1311407 感谢您的建议。我听到你说的是一个很好的经验法则，但对于我正在做的事情，我认为从一个框架开始会是矫枉过正（首先通过一组样式，很有可能在中期将它们扔掉反正）。我想您对 sass / 3.1 的评论仍然遵循最佳实践。我认为您建议使用 sass 的嵌套功能进行组织，但组织单元仍然是控制器或其他东西，文件结构是什么？

标签： ruby-on-rails css

【解决方案1】：

将其移动到答案中，因为评论（只是有点）沉重，即使我意识到这不是您正在寻找的确切答案。

我还没有转向 Rails 3.1，但我已经使用 Compass/Sass 很长一段时间了，我可以大致描述一下我的（有些不断变化的）实践。

在此处查看指南针： http://compass-style.org/

我的目标是尽可能地模块化，并以几种不同的方式将我的样式分类。示例结构可能如下所示。我将 cmets 与文件层次结构一起嵌入，因此希望它是可读的。

- stylesheets
    # at top level, the files which are eventually concatenated and output, the main
    # sheet, "screen", a stripped version for a wysywyg editor, and some overrides.
    - screen.scss
    - print.scss
    - ie.scss
    - wysiwg.scss

    # also in this folder I tend to keep a reset
    - _reset.scss

    # and then separated, "includes" and "partials", includes being purely definitions
    # and mixins, while partials being their application (actual CSS output)
    - _includes.scss
    - includes
      - _definitions.scss   # some global variable defs 
      - _typography.scss    # typography mixins and defs
      - _colors.scss        # colors mixins and defs, and so on
      - ...

    - _partials.scss
    - partials
      - _application.scss   # top level layout + tweaks that don't belong anywhere else
      - _typography.scss    # the generation of typography CSS
      - _colors.scss        # the generation of colors CSS, and so on
      - ...

      - _layouts.scss       
      - layouts             # layout specific styles
      - _controllers.scss
      - controllers         # controller specific styles
      - _modules.scss       
      - modules             # modular, reusable pieces (widgets, breadcrumbs, navs, etc)
      - _vendor.scss        
      - vendor              # everything vendor, (jquery-ui, qtip, colorbox)

基本思想是所有内容都被编译到顶级 *.scss 文件中，唯一不是带有下划线前缀的“部分”文件。这些文件非常简单，通常看起来像这样。

# screen.scss, import all partials
@import 'reset';
@import 'partials';

# wysiwyg.scss doesn't need all the partials, but needs the basic stuff
# and the semantic classes for wysiwyg users, e.g. ".red", etc.
@import 'reset';
@import 'partials/typography';
@import 'partials/colors';
@import 'partials/semantic';

_layouts.scss 和其他共享文件夹名称的文件是它们各自目录中文件的简单集体导入。

一般的想法是，partials 保持尽可能薄，而在 mixins 中完成的工作首当其冲。幸运的是，Compass 还提供了一个完整的手提袋，我经常使用它。

对于某些这种类型的文件结构可能很笨拙，但我发现它很适合我的目的。特别是一旦你获得了一个很好的 mixins 库和可交换的部分库。它使调整一些变量定义或将一个部分或混合替换为另一个以实现快速全局更改变得有些容易。

【讨论】：

【解决方案2】：

在我的项目中，我有一些助手可以根据控制器和操作加载样式表和 javascript。我还加载了默认值、公共目录和供应商目录中的内容。这一切都在我的 application.html.haml 布局中完成，因此所有这些包含都在标题中。

假设一个名为 my_apps_controller.rb 的控制器，我的样式表和 javascripts 目录看起来像这样：

public/javascript/
  vendors/
  common/
  my_apps/
    common/
    index/
    edit/
    show/
  ...etc...

我的 stylesheets/sass/ 目录看起来很相似。

这里的好处是我为我的资产获得了一个基于约定的内置组织，而不必玩配置游戏。挑战在于我发现不清楚它进入哪个操作目录的情况。到目前为止，它对我很有帮助。

我的助手基本上是：

module ApplicationHelper
  def load_javascript_for_directory(directory_name)
    glob_string = "#{directory_name}/**/*.js"
    javascript_include_tag Dir.chdir(File.join(Rails.root, "public", "javascripts")) {   Dir.glob(glob_string).sort }
  end

  def load_css_for_directory(directory_name)
    glob_string = "#{directory_name}/**/*.css"
    stylesheet_link_tag Dir.chdir(File.join(Rails.root, "public", "stylesheets")) { Dir.glob(glob_string).sort }
  end
end

没什么棘手的，但在我的应用程序布局中，我可以调用它们：

= load_javascript_for_directory "#{controller_name}/#{action_name}"

这会加载特定于控制器/动作的资源，而普通的样板资源会定期获取我需要的东西。

我并不是想把它作为唯一的方法来出售。这只是一种替代方案，不仅可以解决我的问题，还可以帮助我真正了解我的资产结构以及如何将它们变干。

是的，SASS 用于我的样式表，coffeescript 用于我的 javascript :)

【讨论】：