WebプログラマーがCSSを知らず、むしろHTMLを改良したくなかったときに出くわしました。これは彼が開発したスクリプトの結果です。 これは、彼（プログラマー）が「美しい」ページを作成するための何らかの手段を持っていることを傷つけないという考えを与えてくれました。 このツールには、CSS、場合によっては画像を含め、HTMLに接続する必要があります（明らかに、特定のルールによって作成されます）。 同時に、CSS（および画像）を別のCSSに変更しても、意味的に正しく表示されないはずです。
上記の要件は、システム（特にCMS）のスキンをコンパイルするための要件と非常に似ています。 ただし、特定のHTML用にシャープ化されたスキンとは異なり、この場合、開発者が多くの複雑なルールを覚えておく必要がないように、HTMLを記述するためのルールをできるだけ単純化したいと思います。
したがって、HTMLに（小さな）制限を規定する一方で、これらのルールを考慮して生成されたコードがこれらの目的のために作成されたCSSで正しくスタイル設定されることをプログラマーに保証し、一方で、これらのCSSを作成するためのテンプレートを指定します。
CSSL（CSSライブラリ）は、私たちのコンセプトと呼ばれるものです。 CSSフレームワークです。 その主なタスクは、非デザイナーおよび非レイアウトデザイナーがHTMLページを開発する際に「洗練」を保証する手段を持つことです。 非常に標準的なスタイルが必要でない場合は、適切なCSSを適用した結果を追加のCSSで拡張する必要があることが理解されています。
それでは始めましょう。
私たちは主なアイデアを持ちます：プログラマーは特定のクラスと構成を覚える必要はありません。 タグのみ。 互換性のために、タグ名と一致するクラスのHTML5タグの豊富さを使用します。
| タグ[.class] | 使用する | |
|---|---|---|
| HTML4 | HTML5 | |
| 以下の内容をラップするもの： | ||
| div.wrapper | フルページラッパー | |
| div.header | ヘッダー | 帽子、ヘッダーブロック |
| div.footer | フッター | 地下室、下部ブロック |
| div.section | セクション | 主な内容 |
| div.article | 記事 | 記事、テキストブロック |
| 典型的な構造： | ||
| ul | 類似ブロックのシーケンス | |
| div.article ul、li | 記事ul、li | 箇条書きと番号付きリスト |
| dl、dt、dd | 定義リスト | |
| ul.menu、ul.menu li | メニュー、メニュー李 | メニュー、ナビゲーション |
| テーブル、tr、td、th、シーアド、tfoot、tbody、キャプション | テーブル | |
| フォーム、フィールドセット、凡例、入力、input.text、input.radio、input.checkbox、input.file、input.submit、input.reset、ボタン、textarea、ラベル、選択、オプション、optgroup | 形 | |
| 特別な構造： | ||
| 除算 | 脇に | ご注意 |
| ブロッククォート | 引用 | |
| ブロック内： | ||
| h1、h2、h3、h4 | 見出し | |
| p、ol、ul、address、div.copyright | 段落、リスト、住所、著作権 | |
| a、a.no_reload、a.logo、a：ホバー、a：訪問済み、a：アクティブ、em、strong、cite、del、ins | リンク、テキスト選択 | |
より詳細に同じようになりました：
最も単純なものから始めましょう-インライン要素：a、b、i、em、strong、strike、cite、del、ins、sub、sup。 それらの一部（b、i、strike、sub、sup）は視覚的な負荷のみを運ぶため、スタイルを規定しません。 その他（a、em、strong、cite、del、ins）もセマンティックの負荷がかかるため、特定のスタイルを定義する必要があります。 a要素は、擬似クラスa：ホバー、a：ビジット、a：アクティブ、およびページをリロードせずに動作するリンク（AJAX）を指定する特別なクラス（a.no_reloadなど）を定義する必要があります。
次に、ページのメインブロックを定義する要素を定義します。 Div.headerは、主要な重要コンテンツで利用可能なサポート情報を含むコンテナです。 Div.footer（またはHTML5のフッター）、それぞれ意味のある主なコンテンツの後にある情報。 Div.section（またはHTML5のセクション）にはメインコンテンツが含まれます。 1ページに複数のセクションがある場合があります。 ナビゲーションには、ul.menu（またはHTML5のメニュー）が使用されます。これには、内部にリンク、テキスト、またはナビゲーション構造を持つli要素が含まれます。つまり、ネストされたナビゲーションが暗示されます。 アクティブなメニュー項目はli.activeです。 すべてのページコンテンツは、コンテンツの幅、マージン、位置を設定するdiv.wrapperでラップする必要があります。
次の見出しを使用する必要があります：サイトのロゴまたはセクション名のh1（1回のコピーでページに存在する場合）（セクションの見出しと一致する必要があります）、セクション見出しのh3、ブロックの見出しと構造のh3、見出しのh4ブロック構造内。
次に、情報の表示に使用される一般的な構造について説明します。 最初の構造は通常のテーブルです。 次のタグを使用してフォーマットします：table、tr、td、th、thead、tfoot、tbody、caption。 見出しのスタイル（th要素）を定義する場合、この要素はtheadとtbodyの両方で発生する可能性があることを理解する必要があります。 などなど。 2番目の典型的な構造は、ラベル付き（ul）および番号付き（ol）の要素のリストです。 ulはそのような構造のシーケンスをフォーマットするためによく使用されるため、テキストのコンテナとして機能するdiv.article（記事）内で放射する場合を除き、ulにラベルを付けないことは理にかなっています。 3番目の構造は、定義のリスト（二重リスト）です（前の構造とは異なり、リスト要素は1つのデータブロックと2つのブロックです）。 このリストは、dl、dt、およびddタグを使用してフォーマットされます。 4番目の構造はフォームです。 formタグには、残りの要素（凡例、入力、テキスト領域、ラベル、選択、オプション、optgroup）を含む1つ以上のフィールドセット要素が含まれます。 ラベル要素は「非経済的な」方法で使用する必要があります。つまり、ラベル要素に関連する要素（入力、テキスト領域）をラベル要素に含めないでください（書式設定の柔軟性を高めるため）。 フォームに関連するボタンを設計するには、入力を使用します。 button要素はフォーム内で使用しないでください;その目的は、JavaScriptを使用してアクティブ化されるアクションです。 入力要素については、異なるタイプの入力要素（input.text、input.radio、input.checkbox、input.file、input.submit、input.reset）の外観を定義する必要があります。 5番目の構造は列です。 div.sidebarで構成され、情報ブロック、メニューなどが含まれる場合があり、div.section（セクション）の前になければなりません。
多くのテキストを含む引用をフォーマットするには、blockquoteを使用します。 ネストされた引用符が可能です。 ツールチップまたは同様のコンテンツはdiv.asideタグ（HTML5を除く）で囲む必要があります。 Div.article（HTML5の記事）は、大量のテキスト情報を強調表示または分離（ラップ）する必要がある場合に使用する必要があります。
上記をまとめると、
- CSSL互換のHTMLを作成する人への指示
- 基本（空の）CSS。CSSテンプレートを作成するためのワークピースになります。
上記を説明するためにいくつかの空白を書きました。
CSSLの実際の動作は次のとおりです。
純粋なhtml | 
同じHTML、色付けのみ | 
別のCSS3カラー化オプション |
他のCSSフレームワークとは異なり：
- 純粋なhtmlでの使用に焦点を当てており、多くのクラスを覚える必要はありません。
- 最新のブラウザー（HTML5、CSS3）で使用する方向。 IE6などの場合 -正常な劣化。
その結果 。
この投稿の目的は、以下から回答を得ることです。
- これに興味を持つプログラマ。 そのようなものがある場合、それは関連しています。
- 一緒に働くことを気にしないデザイナー。 協力の結果は、誰でも使用できるcssファイルのライブラリになるはずです。
- 建設的に話すことができるレイアウトデザイナー）
ありがとう
PS。 私のtwitter 、 jQuery APIチートシート 。