What is the convention in Rails (with asset pipeline) for internationalization inside CSS?

Question

I know CSS isn't supposed to have content, but it does, like this nice box (below) extracted from the Twitter Bootstrap documentation CSS:

/* Echo out a label for the example */
.bs-docs-example:after {
  content: "Example";
}

I don't care for "Example", I use something like that as a mixin:

.box (@legend) {
  /* Echo out a label for the example */
  &:after {
    content: @legend;
  }
}

Then I don't need really dynamic CSS, I can easily include the mixin in a class, but instead of passing "Observation" I need to pass t 'box.observation':

.observation {
  .box("<%= t 'box.observation' =>");
}

Rails is supposed to follow Conventions over Configuration, it is very easy to just add a static CSS/LESS/SCSS and it is already included in all pages in a single minified CSS. What is the convention for internationalized CSS? For example, where I am supposed to put declarations like that of .observation?

Answer 1

You don't need to generate a new CSS file for each locale - that borders on madness. Why does your CSS care about the text content of your website?

I think your best bet would be to use a data-attribute to grab the value...

<div class='bs-docs-example' data-before-content='<%= t.css_example %>'>
  <!-- html here -->
</div>

And then in your css:

.bs-docs-example:after {
  content: attr(data-before-content);
}

You could probably find a way to extract this into a partial (or helper), so that your erb file ends up like this:

<%= docs_example do %>
  <!-- html here -->
<% end %>

And a helper method:

def docs_example
  content_tag(:div, class: "bs-docs-example", "data-before-content" => t.css_example) do
    yield
  end
end