CSSフレームワークは、| ITを表現する

2010 2010年 5月 20 日

再サイクリングCSS：CSSのフレームワークルック·アット·

再サイクリングにBuzzwordであり、Web開発では、それは別のことを意味します。それは努力の面で、エネルギーを節約！

CSSを記述し、デザインからHTMLを作成するための年間で、私は "車輪の再発明"として我々は一般に長期ものに時間とエネルギーを節約するの追求で、いくつかのベストプラクティスに従っています。時間と時間が再び、私は私の将来の仕事に箱から出して使用することが、私はいくつかのテンプレートを作成する必要があり、いくつかの標準的な再利用可能なCSSを自分に語った。完全ではないけど、私は目標の一部を達成するために管理しました。

これらはしようとしたテストの結果、自分よりもはるかに経験豊富な開発者によって作成されるので、CSSの再利用を促進で、私は、私たちに一般的に入手可能ないくつかのCSSのフレームワークを見ていたし、それらを使用するようにすることを決めた。さらに重要なことは "再発明を避ける"。

ベテランに共通する知識が、私はペンにいくつかの重要な概念/ CSSのRE-サイクリングを可能にするために、これらのフレームワークを作成することになっているベストプラクティス/思考をしようとしている。これはちょうど約であり、最近ではCSSの時流に乗っいくつかのCSSの開発者を助けることを願っています！

CSSのキーは、再循環：

命名規則を使用します。

これは、CSS / HTML再利用可能なを行う際に最も重要な要因である必要があります。ページ要素に一貫性のある名前を与えることはほとんど、あるいは修正を加えたページのコンポーネントとそのスタイルの再利用を可能にします。この引数に沿って、あってもHTML5は、前任者以上に大きな変化の変化では、いくつかの構造的なタグVIZを導入することである。 <article>、<section>の、<HEADER>、<aside>、と<nav> [ HTML5とは何をもたらすのだろうか？ ]。でも、HTML 4（または低い）と、それはconsistanly以下の簡単な例のようにページの標準セクションの名前を指定するのが最適です...

、あなたのプロジェクトのほとんどのページを覚えて、同じコア構造要素を有する終わる。これらの共通のコアのページ要素を識別する....

  <div id="container">
    <div id="header"> ... </ DIV>
    <div id="nav"> ... </ DIV>
    <div id="sidebar"> ... </ DIV>
    <div id="footer"> ... </ DIV>
   </ DIV>

デフォルトのスタイル（CSSリセット）をリセットします：あなたがフレームワークを使用するか、または独自に作成するかどうかは、CSSのリセットを提供しなければならない[ CSSリセットは何ですか？ ]、それらが軽減または、時には様々なブラウザ間で発生する視覚的な不整合をなくすように。簡単な言葉でCSSのリセット機構は、このように、彼らがもたらす可能性があり、任意のブラウザのデフォルト値をオーバーライドして、ゼロまたはNULL値にHTML要素のスタイルを設定します。これは、任意のUser-Agentのデフォルトのこれらの要素はvoid [のプロパティを設定するには、白紙の状態を提供CSS2.1ユーザーエージェントのスタイルシートのデフォルトを。すべてのCSSフレームワークは、リセットメカニズムの必要もありません。あなたが自分のCSSをリセットし記述している場合は、注意の単語は、キープロパティをリセットするのを忘れてしまった場合、それはデバッグが非常に困難であるクロスブラウザの問題につながるかもしれないということです。、覚えているリセットスタイルのコピーを保持し、作成するそれぞれの新しいプロジェクトにドロップします。

 ボディ、DIV、DL、DT、DD、UL、OL、LI、H1、H2、H3、H4、H5、H6、事前に、フォーム、フィールドの入力、選択し、テキストエリア、P、BLOCKQUOTE、テーブル、TH、TD {国境：0px;マージン：0;パディング：0;}

要素への設定のデフォルト（ベースラインスタイル）：

あなたは（ゼロまたはnullに）特定のHTML要素の特定の属性のデフォルト値を設定した後、それはこれらの要素のすべてのインスタンス間でいくつかのスタイルを適用する必要があります。これらのデフォルト設定では、デザインごと、またはあなたが従うベストプラクティスによると異なる可能性があります。

ほとんどのCSSフレームワークは、常にデフォルトのブラウザのスタイルをリセットすることに加えて、いくつかの新しいデフォルト値を導入しています。
これらのデフォルト値は、User-Agentのデフォルト設定（CSSリセットによって取り除か）の空隙である、これらは、ブラウザ間で一貫性があります。

覚えておいて、ベースラインのスタイルは、デザイン全体で使用することが予定されているスタイルを設定するために使用されています。例えば、。

  htmlの{フォントサイズ：77％;フォントファミリー：MS Pゴシック、サンセリフ;}
強い、H1、H2、H3、H4、H5、H6 {フォントウェイト：大胆な;

共通のHTMLコンポーネントと一般的なクラスの抽象的なスタイル：

そのようなコンポーネントはプロジェクト間で繰り返し使用されているので、複数ページから成るほとんどのプロジェクトは、フォーム、アラートおよびエラーは、カスタムポップアップ、ライトなどの、例えばある種のサイト全体で使用される一般的なHTML要素を持つようになり、それは提供するために有用であろうこれらのコンポーネントの定義済みのスタイルに関連付けられたクラスのセットとあなた自身に多くの時間を節約することができます。

離れて一般的なHTMLコンポーネントの再利用可能なスタイル定義を定義することから、我々は抽象的なスタイルのクラスは、タイポグラフィ、カラー、あるいはレイアウトに関連する可能性があります。私自身は、使用する傾向がある... Clearfix、Font08、FontGrey、AlignL、DisplayBなどのような一般的なクラスを

 フォームの入力{国境：0px;背景：＃000000;パディング：0px 10pxの; _padding：のでしました。高さ：26px;色：＃000000;行の高さ：30pxの、フォントサイズ：1.1em;}
フォームのtextarea {国境：0px;背景：＃000000;色：＃000000;フォントサイズ：0.9 EM、行の高さ：1.5em;オーバーフロー：目に見える;}
 。fbold {フォントの太さ：太字、カラー：＃CCCCCC;}
 。fgrey {色：＃666666;}
 。flightgrey {色：＃BBBBBB;}
 {クリア：両方;} clearfix
 。分圧器{国境トップ：1px固体＃647B06、ボーダー底：＃9CC00A 1px固体;高さ：0px;}
 。displayb {表示：ブロック;} displayn {表示：なし;}
 。alignr {テキストが整列：右} alignc {テキストが整列：センター}
 。floatr {フロート：右;} floatl {フロート：左;}

一般的なブラウザの癖の修正

さまざまなブラウザは、CSSのコードを実装し、CSSの仕様のサポートの様々なレベルを提供しています。この結果、.... 我々の開発者が取り組むために残されている "ブラウザの癖"。特に、IE6は満たすために締め切りで最もCSSコーダーを見物。良いニュースは、これらの問題（多くの場合、と呼ぶに一緒に可能な限り再利用可能な修正を経験をもたらしているされているCSSハック）。

覚えている、これらのハック/修正は手元に置いておいてください

  / *次のズーム1ルールはIE6 + IE7専用です。  * /
    * HTML。clearfix、
    *：第一子+ HTML clearfix {
          ズーム：1;
      }

あなたのCSSの調整に保つ

再循環の習慣は一日にあなたに来ることはありません。それを開発する必要があります。だからあなたの再サイクリングを計画しています。あなたは抽象的なデフォルトのスタイル、タイポグラフィの定義、レイアウト、HTML要素のスタイルなどが先に考えてみることは、このことを念頭においてください。
また、あなたの過去のプロジェクトを振り返って、それはあなたがporjectsにわたって頻繁に使用する傾向があるスタイルを識別するのに役立ちます。それは抽象的。
任意の未使用のスタイルを削除します。この練習は "加熱発泡"と呼ばれる一般的な症状からあなたのCSSのフレームワークを維持します -
反復的なスタイルを削除します。
プロジェクトを横断して移植するのに十分柔軟であるスタイルのセットを構築します。

CSSフレームワークルック·アット·

最後に。あなたがインスピレーションとCSSのフレームワークのいずれかまたは複数を使用する予定されている場合は、HERESには、いくつかの一般的なものの簡単なリストです。....

960グリッドシステム：960グリッドシステムは、960ピクセルの幅に基づいて、一般的に使用されるディメンションを提供することにより、Web開発のワークフローを合理化するための努力です。個別に、またはタンデムで使用することができる12、16、24列：3つのバリアントがあります。あなたは簡単に十分なあなた自身のための1つを作成することはできません何も考えず、フレームワークは、PDF形式で印刷するためのグリッドテンプレートを提供するものがあなたのページdesigns.Betをスケッチするために使用できる、あなたがたときにいくつかのシートを運ぶ場合、それは、プロフェッショナルな印象になるだろうあなたは、UI要件の収集のためにクライアントに移動します。それはまたあなたの設計作業を開始する "10のためのスターター"を提供花火、フラッシュ、InDesignでは、イラストレーター、フォトショップ、Visioのような人気のデザイン·ソフトウェアの基本的なグリッドのテンプレートなどを提供しています。
青写真：青写真がはっきりと分類されたCSSリセット用のファイル、グリッド、フォーム、印刷、タイポグラフィ、用のプラグインボタン、タブ、スプライトなどまた含まれる独立したとして、IEのサポートを提供しています。
SenCSs ：上記の2つとは異なり、SenCSs（発音センス）は、レイアウト用のCSSの定義を持っていません。これは、フォント、パディング、マージン、表、リスト、ヘッダー、ブロック引用blockquote、フォームなどが含まれていません。
BlueTrip ：名声へのオリジナルの主張は、それはブループリント、旅行 OLIのような他の他のフレームワーク...それは、その名前を取得し、そこからが提供する最高の機能を組み合わせたということでした。その機能セットは、24列のグリッド、タイポグラフィスタイル、ORMスタイル、印刷、ボタンなどが含まれます。
YUIグリッド：Yahoooデベロッパーネットワークによってあなたに持って来られては、750px、950px、974pxとで流体幅（100％）のレイアウトと同様にプリセット固定幅のレイアウトをサポートしており、容易に任意の数に合わせてカスタマイズする能力。あなたが見ることができるように、その技術的にだけレイアウトコンポーネント。 YUIは、他のページ要素のHTML / CSSのセットを提供
YAML（もう一つのマルチカラムレイアウト）
Emastic