0

HTML、CSS、JavaScriptを整理しようとしています。ずさんなことは知っていますが、物事を書くためのよりクリーンな方法を理解することはできません。しかし、もっときちんとした方法があるに違いないという帽子を見ることができます。

http://jsfiddle.net/craigzilla/hk8SR/

助言がありますか？

#btn1 {
height: 88px;
width: 110px;
float: left;
position: absolute;
}
#btn2 {
height: 88px;
width: 110px;
float: left;
position: absolute;
left: 110px;
}
#btn3 {
height: 88px;
width: 110px;
float: left;
position: absolute;
left: 220px;
}
.rollover1 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
.rollover2 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
.rollover3 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
4

5 に答える 5

2

まず、複数のセレクターに同じルールを割り当てることができます。このようなもの：

.rollover1, .rollover2, .rollover3 {
    background-image: url(http://www.placehold.it/110x88);
    height: 88px;
    width: 110px;
    opacity: 0;
    float: left;
}

ただし、それよりもさらに優れているのは、.rollover1、2、および3の必要性を排除し、すべてに適用する.rolloverクラスを作成することです。

ロールオーバーごとに異なる画像が必要な場合は、次のように機能します。

.rollover1, .rollover2, .rollover3 {
    height: 88px;
    width: 110px;
    opacity: 0;
    float: left;
}
.rollover1{
    background-image: url(http://www.placehold.it/110x88);
}
.rollover2{
    background-image: url(http://www.placehold.it/110x88?2);
 }

IDでも同じことができます。

スタイルのクリーンアップを真剣に検討している場合は、「オブジェクト指向のCSS」を調べてください（注：「OOCSS」という名前は非常に誤解を招くと思いますが、それでも良い習慣です）。オブジェクト指向のCSSは、基本的にCSSの記述方法を変更します。「このCSSは、青色でマージンが5pxのボタン用です」と言って、次のようなコードを出力するのではなく、次のようにします。

#myBlueButton{
    background-color:#00f;
    margin:5px;
}

<button id="myBlueButton">

次のようにCSSを記述します。

.blue{
    background-color:#00f;
}
.margin5px{
    margin:5px;
}

そして、ボタンは次のようになります。

<button class="blue margin5px">

これにより、関心の分離とシンマンティッククラスが促進されると同時に、IDの必要性が減り、過度に特定されたCSSセレクターの必要性が減ります。また、CSSスタイルを繰り返すことなく簡単に再利用できます。

ただし、OOCSSよりも優れているのは、CSSを生成するルールを記述できるSASSやLESSなどです。

于 2013-01-30T16:22:03.360 に答える
1

Rollover1 Rollover2とRollover3はすべて同じスタイルのクラスです。つまり、必要なロールオーバークラスは1つだけです。それらは同じものなので、2つ乗ることができます。

例：

 .rollover {  // Everytime you need this styling call this class
 background-image: url(http://www.placehold.it/110x88);
 height: 88px;
 width: 110px;
 opacity: 0;
 float: left;

}

于 2013-01-30T16:16:50.533 に答える
1

すべてにクラスを使用してから、要素を個別に配置すると、コードの量が最小になると思います。

<style>
.btn {
height: 88px;
width: 110px;
float: left;
position: absolute;
}
.rollover {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
</style>

クラスを宣言する必要があるのは1回だけです。そうすれば、必要な数の要素にクラスを適用できます。idは1つの特定の要素にのみ使用できます...したがって、同様のプロパティを多くのものに適用する場合は、クラスを使用してから、特定のものにidを使用します。

したがって、HTMLで、ボタンclass="btn"と各ボタンで同様のプロパティを設定するために使用できます。次に、スタイルタグに異なる番号を追加して、それらを一意に配置できますstyle="left:###px;"。次にclass="rollover"、ロールオーバーで使用します。

于 2013-01-30T16:19:40.247 に答える
0

このようなもの（すべてを「クラス」に含める方がよい）：

.btn1, .btn2, .btn3, .rollover1, .rollover2, .rollover3 {
width:100px;
height: 88px;
float: left;
}

.btn1, .btn2, .btn3 {position: absolute;}

.rollover1, .rollover2, .rollover3 {opacity: 0;}

.btn2{left: 110px]
.btn3{left: 210px}

.rolloverと.btnをスプライトCSSに含めて、1つのルール（1つのクラス呼び出し）にして、 CSSスプライトを使用することもできますbackground-position。

于 2013-01-30T16:22:00.523 に答える
0

質問を指す：ずさんなコードのクリーンアップhtml / css / javascript

この投稿に関連する：https ：//stackoverflow.com/questions/1086584/online-service-to-cleanup-html-formatting

続ける

于 2013-01-30T16:23:33.967 に答える