<p style="background-color:#<%= debate.bg_color %>;" >

be_color is a method of Debate that returns a string like 45FFFF.

Although it does what I want, this seems like a tremendously bad idea. What would be a better way to accomplish this? (I'm very new to both Ruby and Rails. And new-ish to web development in general.)


inline styles are bad practice

more elegant way would be assigning class to your

element based on debate properties, maybe creating a helper if this line is used frequently

  • \$\begingroup\$ Does that mean using the same bg_color function but putting it in the .css instead? The color is generated and could be anything from the entire range of colors. If I create a helper, should I have the helper return something like "background-color:#123123;"? \$\endgroup\$ – Drew Jun 2 '11 at 22:17
  • \$\begingroup\$ your request is strange - usually all colors are known beforehand and put to static css. something like this: \$\endgroup\$ – binarycode Jun 3 '11 at 9:06
  • \$\begingroup\$ .debate-1 { background-color: #123 } .debate-2 { background-color: #234 } .debate-3 { background-color: #fff } And then one of those classes is assigned to your <p> element, depending on your debate object. If you hardcode css styles in your views, it will be nightmare if designer decides to change some colors. You will have to edit all occurrences of that color to new one. If you had predefined classes with colors, you would have to edit only one line in css file. \$\endgroup\$ – binarycode Jun 3 '11 at 9:11
  • \$\begingroup\$ The color is dynamically generated based on user actions (the app is for debating, and if one side of the debate has more comments, it will have a different color, based on the total number of comments for both sides, and how many more comments the winning side has) \$\endgroup\$ – Drew Jun 8 '11 at 3:58
  • 1
    \$\begingroup\$ Inline styles aren't necessarily evil, though when you find yourself using them a lot, especially similar ones, something's probably wrong with your design. \$\endgroup\$ – Peter C Aug 12 '11 at 2:26

Based on your restrictions I would say this solution is fine. If you don't want to do inline styles though you could definitely consider something like either writing the color to a javascript variable or a data-* attributes on the debate element.

<script type="text/javascript">
var debateColor = '<%= debate.bg_color %>';

or the data solution:

<p class="debate" data-debate-color="<%= debate.bg_color %>';

But if it were me I would actually do the color calculation on the frontend, meaning you would basically assign the number of actions for each debate to javascript variables, and what would be done with those (a custom background color for instance, or anything else) would be determined in javascript. The color of any element just doesn't seem like something you would want to calculate on the server side unless it involves complex business logic.

  • \$\begingroup\$ Don't calculate styles on the client side unless they need to be dynamic in a way that server-side business logic can't provide. Just use appropriate CSS and have done with it. \$\endgroup\$ – Marnen Laibow-Koser Jun 24 '14 at 14:08

This has nothing to do with Ruby. Inline styles should never be used in any Web development, ever. Specify the background color in a CSS file.

Bonus tip: use Haml and Sass.

  • \$\begingroup\$ I disagree with your blanket statement. Inline styles are a useful tool in a web developers arsenal. They should be used sparingly and the dev should be aware of their limitations and implications. \$\endgroup\$ – Mike Causer Dec 11 '20 at 0:14
  • \$\begingroup\$ @Mike Under what circumstances do you believe that inline styles are useful in 2020? I can’t think of a single case where I’d use them (except for quick experiments on my development machine only). \$\endgroup\$ – Marnen Laibow-Koser Dec 11 '20 at 5:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.