オシャレなライオンのように、先端学校第2期TIL(4月18日)
4434 ワード
🔖LikeLion FrontEndSchool TIL 4月18日(月)
ハン・ジェヒョン講師の講座。
CSS
CSS設計技術
OOCSS (Object Oriented CSS)
CSSの複数の要素をモジュール化する方法
こうぞう
width、height、padding、marginなどのレイアウトに影響するプロパティを、構造内の対応するCSS要素に分類します.
skin
font,color,background,borderなどはレイアウトに影響はないが,視覚に影響する属性を皮膚に対応するCSS元素に分類した.
cf.エレメントのスタイルがcontainer(親エレメント)に依存しないことを確認します.すなわち,コンテナのクラスをコンテンツスタイルセレクタから除外する.
Example
.btn {
width: 200px;
height: 80px;
font-size: 30px;
}
.btn-close {
background: black;
color: #fff;
border: 3px dotted #fff;
}<button type="button" class="btn"></button>
<button type="button" class="btn btn-close"></button>SMACSS (Scalable and Modular Architecture for CSS)
柔軟でモジュール化された構造のCSS方法論を採用し、役割によってCSSコードを分離する.
きそ
プロジェクトの標準スタイルの定義
レイアウト
タイトル、ホームページ、ツイッター、エッジバーなど、Webサイト上で大きなフレームワークを構築するモジュールに関するルールを定義します.いくつもないのでidセレクタも使います.
モジュール
IDセレクタは使用しないでください.主にレイアウト内のすべての要素が意味のある重複要素であることを指定します.
似たようなモジュールのシェイプが少し異なる場合は、サブクラスを作成します.
国
既存のスタイルを上書きまたは拡張します.JSで繰り返し挿入できるスタイル
テーマ
background-image、background-color、color等は、ユーザにサイト感覚の画像を提供する.BEM (Block, Element, Modifier)
CSSメソッド論はBlock,Element,Modifierの3つに分類される.デフォルトでは、idセレクタと要素セレクタは推奨されません.
Block
classネーミングの目的、すなわちどこでも繰り返し使用できる部品を明確にする必要があります.
Element
ブロックを構成する要素はブロックに属します.blockのclass名を継承し、elementのclass名を後ろに書き、class名を付けます.
Modifier
ブロックまたは要素の外観、ステータス、またはモーションを定義します.単独ではなく、2番目のクラス名として使用します.
ビニフモードログインページコードレビュー
labelを有するパッケージ
Reference
この問題について(オシャレなライオンのように、先端学校第2期TIL(4月18日)), 我々は、より多くの情報をここで見つけました https://velog.io/@luckjjh/멋쟁이사자처럼-프론트엔드스쿨-2기-TIL-4월-18일テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol