CSSについて

WHY?

サイト作成時には、CSSでフロントエンド設計を行います.しかし、一般的に使われているCSS文法は当たり前のように使われているので、考えてみれば、私が書いたコードは理解して使っているCSS文法ではなく、正しいと思います.
フロントエンドを理解するためには、まず最も基本的なCSSを理解してから軽く書きます.

パレートの法則

cssでは,上位20%のspecが全cssコードの80%を占める.
実際に実戦でよく使われるcssは多くない.

セレクタ

ul li:hover a[target="_blank"] { color : blue };
//ulからtarget=blankはセレクタです.
もしあなたがCSSを初めて勉強したら、それは第1章のSELECTORです.
以前はセレクタの学習が必要だったが,現在の重要性はもう昔のものではない.

왜 selector가 덜 중요해졌을까?

예전에는 html과 css를 분리해서 html을 최대한 건들지 않고 css만으로 디자인을 하는 것이 중요했습니다. 
하지만 지금은 웹프레임워크 위에서 html과 css를 묶어 컴포넌트로 다루는 방식으로 진화를 했습니다.

그래서 html의 수정과 css의 수정이 한 곳에서 이루어지다보니 selector가 복잡할수록 오히려 html을
수정하는데 문제가 더 발생

CSS開発方法（BEM）

コードの作成時に読み取り可能性が増加すると、効率的に作業でき、他の開発者がコードを維持する際に明確性と一貫性が向上します.
これらの方法だからこそ,最近CSS規格による方法がBEMである.
BEM(Block Element Modifier)

header__form--email 과 같은 클래스명이 있다면, 이것이 BEM 방법론을 활용한 것
BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다는 점

Block(ブロック全体を囲む要素)

블럭(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말합니다.
헤더, 풋터, 사이드바, 메인 컨텐츠 영역을 가지고 있다고 가정하면 
각각의 영역들이 블럭으로 간주되는 것

블럭 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치

Element
要素(element)はブロックの一部です
ブロックは全体を表し、要素は断片を表し、各要素は2つの下線で接続されています->ブロックの後ろにあります
CSS
.block__element { property : value; }
2つの下線は、コードの直感的かつ迅速な検索と処理を容易にします.
CSS
.header__logo { proerty : value; }
.header__tagline { property : value; }
.header__searchbar { property : value; }
.header__navigation { property : value; }
->クラス名は簡単、明確、正確に保つ
->スタイルシートとHTMLもDRYのままにしておく必要があります

Modifiers

modifierは、ブロックまたは要素のプロパティを変更します.このプロパティは、ブロックまたは要素の外観またはステータスを変更します.
クラス名の名前は、要素を繰り返し使用できるようにするため、要素のスタイルが同じ場合は、サイトの他の領域でも新しいクラスを定義する必要はありません.
一部の要素のスタイルを変更する必要がある場合は、修飾子のみを使用します.
要素またはブロックの後に2つのハイフン("--")を追加して修飾子を表示
CSS
.block--modifier {...}
.block__element--modifier{...}
Point! すべての名前は簡単明瞭でなければならない.
絶対必要でない限り、追加のクラスを作成したり、同じスタイルを繰り返したりしないでください.