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 に答える