2010-11-23 15 views
5

私のWebアプリケーションでは、いくつかのCSSクラスを使用して少ないコードを書いています。私はマークアップでそれらを頻繁に使用して単一のプロパティを追加したり、場合によっては2つを追加したりします。CSS - 一般的なクラス

これらは

.clear { float: none; clear: both; } 
.fl_l{ float: left; } 
.fl_r{ float: right; } 
.ta_l{ text-align: left; } 
.ta_r{ text-align: right; } 
.no_td:hover { text-decoration: none; } 

あなたが同様の何クラスを使用します以下の通りですか?あなたは他のプロジェクトでこの技術を見たことがありますか?

+0

Hey Denis。この質問は面白いですが、私はそれが非常に「答える」とは思わないのです。あなたが解決しようとしている特定の問題はありますか?たぶんあなたは質問にもっと詳細を加えることができます。今のところ、この質問はより多くの調査であり、SOに属しているようには見えません。 –

答えて

3

ええ、あなたは、あなたのCSSファイルが非常に大きいのですか、すべてのクラスが他のいくつかの共通クラス

極めて具体的になりようにあなたは、共通クラスを使用しない場合は...

.split { float: left; width: 50%; } 
.center { text-align: center: margin: auto; display: block; } 
.bold { font-weight: bold; } 
.top { vertical-align: top; } 
.bottom { vertical-align: bottom; } 
2

復元浮動要素の後のフロー:

.clearfix:after 
{ 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    line-height:0; 
    visibility:hidden; 
} 
+0

ええ、私もこれを持っています。 –

+0

の後はCSS3ですね。それはまだ「安定していますか? – hunter

+1

:and:beforeはCSS3の前に存在し、最新のブラウザでうまく機能します。古いコードの場合、このコード(.clear {float:none; clear:both;})が解決策になります。 –

2

誰もが独自の設定を持ち、アプリケーションの性質にもよります。つまり、私は個人的には、私が移植したbase.cssを、スタータースタイルのコンポーネントとしてアプリケーションからアプリケーションに再利用する傾向があります。その中で私はEric Meyersのcss resetステートメントも実装しています。これはブラウザ間での開発をはるかに容易にします。

あなたはCSSフレームワークは、そのおそらく価値がどのように形成されるか、プロ調べることで純粋に興味がある場合は、あなたの次のダウンロードおよび見直しながら:

960 grid css framework

Blueprint css framework

2

は私が離れてから滞在したいですできるだけ多くのスタイル関連情報をHTMLから遠ざけるように、共通のクラス名として記述します。ハンターが述べたように、これはセレクターリストが時々長くなることがあることを意味しますが、問題は見つけられません。

浮動小数点数をクリアするために共通のクラス名を使用した場合(私が通常そうである例の唯一の例)、私はもっと頻繁に.groupのようなものを使用するよりも、少量の意味論(それはおそらく一緒に属しているもののグループ)に添付されています。これはDan Cederholmによって提案されました。

このようなクラス名を使用しても問題ありません。たとえば、メディアクエリを使用してビューポートのサイズに応じてレイアウトが変更された場合、常にスタイルを同じにしたくない場合は、セレクタに固有でなければならないため、クラス名の有用性が失われます。もう1つの例は、HTMLがあなたのクラスを損なわれない非専門家のクライアントによってコンテンツ管理されている場合です。

4

このような古い質問については申し訳ありませんが、これは悪い考えです。たぶん、特定の問題のセットのために、それは法案に適合します。私の考えは、CSSはスタイル情報がどこにあるべきかということです。あなたが提案したことを行うことで、基本的にはhtmlのstyle属性だけを使用しているので、コンテンツのスタイル情報を混合しています。いつかスタイルを完全に変更することに決めたら、大部分のクラスを削除してHTMLを更新する必要があるため、これは悪い考えです。

たとえば、HTMLは(ページ内に何度も使用されている抽象のために言って)このようにしている場合:

<p class="abstract ta_l mb10"> 
    Lorem ipsum dolor set. 
</p> 

そして、あなたはその抽象的に見える方法を変更することを決定した1日目:例えば、あなたはそれが "text-aligned:left"でなく、マージンボトム(これはおそらくmb10となるでしょう...私はこれが以前に使われているのを見ました)を望んでいないので、HTMLに変更しなければなりません。

ここで、これを変更する必要がある10個の要素を掛けます。もしそれが50だったら?あなたが完全な再設計をしていたら? shudder

CSSは、1つの簡単なクエリで複数の要素を選択し、中央の場所から簡単に変更できる適切なスタイルを与える方法を提供します。これらの "ヘルパー"クラスを使用することで、このプロジェクトのメンテナンスを次の開発者に悪夢としています。このような

<p class="abstract"> 
    You should sign in or something! 
</p> 

とCSS:あなたは、このようにHTMLを持っている場合

代わりに、

.abstract { 
    margin-bottom: 10px; 
    text-align: left; 
} 

ちょうどこれに1つのルールに変更できます。

.abstract { 
    text-align: right; 
    margin-bottom: 0; 
} 

をし、それで済むよ!すべての50要素のために!

ちょうど私の2セント - ちょうどこれで焼けた人から。

関連する問題