カテゴリー:
コーディングルール
閲覧数:434 配信日:2019-10-13 10:20
一般的に良いとされるやり方
CSSファイルへ記述する
この方法の短所
後から探すのが面倒
一般的に良くないとされるやり方
HTMLファイルへ記述する
この方法の長点
HTMLファイルを確認するだけで、使用しているCSSがすぐに分かる
この方法の短所
minify できない
※minify しても良いが、それだとHTMLファイルへ直接記述している利点が失われる
譲れないこと(2019年10月13日時点)
最終的には
minify 出力した1ファイルを読込
・各プロジェクト毎の「js」「css」配置現況
minify するためには?
HTMLファイルへの直書を止めざるを得ない
動的に値を生成している場合は、
<style>
.hoge {
position: fixed;
bottom: 3rem;
right: 15px;
background: #<?php echo $randColorAry[0]; ?>;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
text-decoration: none;
border: 1px solid #<?php echo $randColorAry[0]; ?>;
z-index: 99;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
</style>
その部分だけ、HTMLへ記述すれば良いのでは?
CSSへ記述してもよいかもしれないが、後で動的生成箇所を把握しづらくなるかもしれないため
<style>
.hoge {
background: #<?php echo $randColorAry[0]; ?>;
border: 1px solid #<?php echo $randColorAry[0]; ?>;
}
</style>