CODEWITHSUNDEEP
phphtmlcss
hesson
hesson

Reputation: 1862

Is it considered bad practice to write an element's style directly with PHP?

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?

Upvotes: 3

Views: 827

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92274

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;
}

Upvotes: 2

Waleed Khan
Waleed Khan

Reputation: 11467

For the best semantic use, I would use this:

div.colored {
    color: attr(data-color)
}

Then use PHP like:

<div class="colored" data-color="<?= $color ?>"></div>

And you could always back this up with some simple Javascript.

Upvotes: 1

Markus Unterwaditzer
Markus Unterwaditzer

Reputation: 8244

Why not both? Separated CSS from HTML and PHP in your CSS file?

You might also check out CSS-preprocessors. LESS is the most common one, but there's also SASS, Stylus and whatnot.

Upvotes: 1

Related Questions