3

我知道将 CSS 与 HTML 混合通常被认为是不好的做法，并且 CSS 选择器（id、类等）通常应该用于设置外部样式表中的元素样式。但这在用 PHP 编写动态页面时可能非常不方便。通过写入元素的 style 属性，直接使用 PHP 输出元素的样式要容易得多。这是否会被认为是不好的做法，即使使用类会使开发人员的管理变得更加困难？

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

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

然后将类附加到元素：

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

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

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

哪个是更好的方法？

4

3 回答 3

2

编写内联样式通常被认为是不好的，无论是使用 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;
}
于 2012-09-01T19:14:36.657 回答
1

为什么不兼得？在 CSS 文件中将 CSS 从 HTML 和 PHP 中分离出来？

您还可以查看 CSS 预处理器。LESS是最常见的一种，但也有 SASS、Stylus 等。

于 2012-09-01T19:05:44.220 回答
1

为了最好的语义使用，我会使用这个：

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

然后像这样使用PHP：

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

你总是可以用一些简单的 Javascript 来支持它。

于 2012-09-01T19:17:42.743 回答