공통 버튼 구조
display, padding, cursor처럼 모든 버튼이 공유할 뼈대입니다.
구조는 한 번 만들고, 크기와 스킨을 조합한다
OOCSS는 버튼의 뼈대, 크기, 색상 역할을 나누어 같은 HTML 패턴을 여러 상황에 재사용하게 만듭니다.
크기 변형
큰 버튼과 작은 버튼을 기본 구조 위에 독립적으로 얹습니다.
스킨
색상과 강조 상태만 담당하므로 다른 크기와 자유롭게 조합됩니다.
HTML 클래스 조합
button classes: btn btn--large btn--primary
`.btn`을 수정하면 두 버튼의 공통 동작이 함께 바뀌고, 스킨 클래스만 바꾸면 색상 의도만 바뀝니다.
중복 감소
버튼마다 padding과 cursor를 반복하지 않고 구조 클래스로 공유합니다.
의도 분리
크기 문제는 크기 클래스에서, 색상 문제는 스킨 클래스에서 찾습니다.
컨테이너 독립
사이드바 안에 있어도, 헤더 안에 있어도 같은 버튼 객체를 씁니다.
새 UI를 만들 때 먼저 “모든 변형이 공유할 구조가 무엇인가”를 분리하면 BEM과 SMACSS로 넘어갈 때도 클래스 책임이 선명해집니다.