격식에 맞게 만들다

최적화에 급급하지 않음

위인의 말을 쓰다
시기상조의 최적화는 모든 악의 근원이다.
이처럼 처음부터 완벽의 최적화를 지나치게 추구했다가 결국 많은 시간을 들여 만든 것을 결국 사용하지 못하고 낭비했다.
필요하기 전에 기능을 추가하지 않습니다.

Rules of three

어떤 시기의 최적화 지도 방침
세 번 반복되는 것은 모델로 성립된다.

처음 이 모델이 나타났을 때 특별히 재사용을 고려하지 않아도 된다

한 번 해결된 모델을 다시 만났을 때도 조립화하려는 마음을 억제한다

세 번째, 도안으로 무엇을 알고 무엇을 모르는지 고려하여 조립하여 팩스로 진행

이렇게 되기 전에 주의해야 할 거.

자세히 쓰지 않는 선택기

유명충돌 스타일의 오염을 피하기 위해 독특한 이름을 지어라

다른 시점에서 Rules of theree를 생각하면
"그 구성 요소가 세 가지 항목에서 사용할 수 있다면 다른 항목도 사용할 수 있습니다."

SOLID CSS

Single Responsibility Principle/단일 책임 원칙

Open/Closed Principle/켜기/끄기 원칙

Liskov Substitution Principle/다람쥐의 교환 원칙

Interface Segregation Principle/의존관계 역전의 원칙

Dependency Inversion Principle/인터페이스 분리 원칙

단일 책임 원칙

이 책임과 외관을 구축하는 책임은 분리되어 설계된 것이다.
구체적으로 말하면 구조position와 float의 외관border과 background이 함께 설치되지 않은 규칙 그룹이다.

해방/폐쇄의 원칙

Todo: 추후 요약

재활용이 전부가 아니에요.

예를 들어, 다음 설계가 있다고 가정합니다.

.btn {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0.6em;
    line-height: 1;
    text-decoration: none;
    color: #ddd;
}

.heading {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

<a href="#" class="btn">ボタン</a>
<h2 class="btn heading">見出し</h2>

예를 들어 같은 장식이라면 클라스를 하나로 정리하는 것이 좋다고 쉽게 생각하지 마라.
이 경우 SMACSS의 Theeme 클래스를 다음과 같은 방법으로 수정할 수 있습니다!

.btn {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    color: #ddd;
}

.heading {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.theme-default {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0.6em;
}

<a href="#" class="btn theme-default">ボタン</a>
<h2 class="heading theme-default">見出し</h2>