Question

I know that it is usually considered bad practice to mix CSS with HTML and that CSS selectors (ids, classes, etc) should generally be used to style elements in external stylesheets. But this can be quite inconvenient when writing a dynamic page in PHP. It is much easier to output the element’s style directly using PHP by writing to the element’s style attribute. Would this be considered bad practice, even if using classes would make it even more difficult to manage from the developer’s end?

For example, I have an element’s color style store in a database and this element has a different color depending on the parameters provided in the dynamic PHP page. In this scenario, I could write to the css stylesheet with php some class with the color variable I get from the database

echo '.custom-color {';
echo   'color: ' . $colorFromDatabase . ';';
echo '}';

and then append the class to the element:

<div class="custom-color"></div>

or I could just echo the style directly to the element.

echo '<div style="color:' . $colorFromDatabase . ';" >';

Which is the better way to go?

Answer 1

Writing the style inline is usually considered bad, whether it’s with PHP or by hand. It is simpler but harder to maintain and you don’t get to cache your CSS content.
If you want the CSS to be more dynamic , you should experiment with http://sass-lang.com/

Note that custom-color is not a very good class name, it should be something like main-header, blog-post, last-modified since they tell you about the content not about its style.

SASS would let you define a variable for a color and reuse that within your CSS files, you could then just change the variable names and regenerate your CSS files

The advantage of what you’re doing is that you don’t have to learn new things. PHP will get it done. You need to write something into your build if you want to use SASS with content from a database and come up with a scheme for which CSS to use.

Note that there are a few cases where it would make sense to write the attribute directly, but it’s hard to explain when exactly. It’s usually when it’s only going to be used once.

Example from their page

// Variable Definitions

$page-width:    800px;
$sidebar-width: 200px;
$primary-color: #eeeeee;

// Global Attributes

body {
  font: {
    family: sans-serif;
    size: 30em;
    weight: bold;
  }
}

// Scoped Styles

#contents {
  width: $page-width;
  #sidebar {
    float: right;
    width: $sidebar-width;
  }
  #main {
    width: $page-width - $sidebar-width;
    background: $primary-color;
    h2 { color: blue; }
  }
}

#footer {
  height: 200px;
}