使用PHP直接编写元素样式是否被认为是不良实践？

Question

我知道通常认为在HTML中混合CSS是不好的做法，应该使用CSS选择器（如id、class等）来在外部样式表中为元素设置样式。但是，在PHP中编写动态页面时，直接使用PHP输出元素的样式会更加方便，只需将样式写入元素的style属性即可。即使使用类可能会让开发人员更难管理，但这样做是否仍然被认为是不好的做法呢？

例如，我有一个元素的颜色样式存储在数据库中，这个元素根据动态PHP页面提供的参数而具有不同的颜色。在这种情况下，我可以使用PHP向CSS样式表中写入一些带有从数据库获取的颜色变量的类。

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

然后将类别附加到元素上：

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

或者我可以直接将样式回显到元素中。

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

哪种方法更好？

- hesson

Answer 1

将样式内联通常被认为是不好的做法，无论是使用PHP还是手动编写。虽然更简单，但难以维护，并且无法缓存CSS内容。如果您希望CSS更具动态性，则应该尝试使用http://sass-lang.com/。

请注意，custom-color并不是一个很好的类名，它应该像main-header、blog-post、last-modified这样，告诉你关于内容而不是样式。

SASS可以让您为颜色定义变量，并在CSS文件中重复使用它们，然后只需更改变量名称并重新生成CSS文件即可。

您所做的优点在于您不需要学习新东西。PHP会完成它。如果您想使用来自数据库的SASS内容并想出一个要使用哪个CSS的方案，则需要将其写入构建中。

请注意，有些情况下直接编写属性会有意义，但很难解释什么时候。通常情况下，只有在属性只使用一次时才会这样做。

来自他们页面的示例：

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

- Ruan Mendes

---

那怎么有助于从数据库动态使用颜色呢？ - Waleed Khan

@arxanas 你可以使用数据库生成 SASS 变量，然后使用这些变量为您生成 CSS。 - Ruan Mendes

Answer 2

为了获得最佳的语义使用，我会使用这个：

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

然后使用PHP，如下：

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

而且你总是可以用一些简单的Javascript来支持这个。

- Waleed Khan

---

有趣，我以前从未听说过CSS的attr()函数。所有主要浏览器都支持它吗？ - hesson

从IE8开始，其他浏览器已经使用了更长时间。https://developer.mozilla.org/zh-CN/docs/CSS/attr - Ruan Mendes

这是一个糟糕的想法。这只是通过后门将您的演示信息添加到HTML层中。 - Alohci

Answer 3

为什么不两者兼顾呢？在CSS文件中将CSS与HTML和PHP分开？

您还可以尝试使用CSS预处理器。LESS是最常见的一种，但也有SASS、Stylus等其他选项。

- Markus Unterwaditzer