Question

我知道将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 . ';" >';

哪种方式更好？

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

Answer 2

为什么不两者兼而有之？ CSS文件中的HTML和PHP分开的CSS？

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

Answer 3

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

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

然后使用PHP，如：

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

你可以随时用一些简单的Javascript来支持。

用PHP直接编写元素的样式是不好的做法？

3 个答案: