Home Forums General Issues Avoiding Inline Styles


Avoiding Inline Styles

  • I’m attempting to modify one custom field with another, for instance, the color of some text. I’ve managed to roughly make something work with something like this:

    <span class="test-color" style="color:<?php the_field('color_of_text', 'option'); ?>"><?php the_field('actual_text', 'option'); ?>

    Where obviously the color_of_text field is a color picker field and the actual_text field is a plain text field. I have several of these I want to add, possible even using different styles, such as specific font, etc.

    I know inline styles are not best practice to use, and I’m sure there has to be a better way to accomplish this if anyone has any thoughts they could share.


  • The alternative is to create a list of classes for every style you want to provide and output them all into the class and then create a css rule for every one of those classes. Of course this means that you’re going to spend a lot more time coding and keeping all those things straight and every time you change one thing you need to change several others.

    On the other hand, the main reason for separation in my opinion is to allow changes by other developers to be made more quickly in the future. Separation in this case will only make that job more difficult.

    Since the goal of your admin interface is to allow the user to set the styles of individual elements then I personally don’t see any reason why you shouldn’t just output those styles. This will also allow for faster changes in the future. If for example you want to allow a new color or font you just need to add it to what can be selected by the user and you’re done.

    This to me is no different than allowing the editor to apply colors, fonts, sizes and any number of other formatting options in the WP content editor.

    Sometimes it’s better not to over complicate things by insisting on doing what is considered “best practice” by the masses.

  • Thanks John, Those are good points and I really appreciate your input on this.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Avoiding Inline Styles’ is closed to new replies.