<button class="btn red-btn"> 빨간 버튼</button>
<button class="btn blue-btn"> 파란 버튼</button>
.btn {
font-size: 14px;
font-weight: 700;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}
.red-btn {
background-color: red;
}
.blue-btn {
background-color: blue;
}
※ Utility class:
미리 적용시킬 세부적인 스타일을 클래스명을 만들어서 만들어두웠다가
필요 시 클래스명을 태그에 적는 것으로 적용시킴.
(스타일 1~2개만 들어있는 클래스)
큰 class 가 맡고 있는 덩어리(component) 이름
(class="덩어리이름")
바로 하위 class 에는 그 부분 역활의 이름
(class="덩어리이름__역활")
더 하위 class 에는 세부특징 까지
(class="덩어리이름__역활--세부특징")
<div class="product">
<div class="product__list">
<div class="product__list--item">
</div>
</div>
</div>
장점: 직관적으로 클래스명만 봐도 어떤걸 뜻하는 곳인지 알 수 있음.
단점: 클래스명이 너무 길어지고 복잡해져서 가독성 떨어짐.
항상 클래스 이름을 적을때 고민을 많이 하던 나 🥲
위의 방법들이라면 이름 정하기가 훨씬 쉬워지고,
협업 시 팀원들간의 소통에도 크게 도움이 될듯 싶다.
하지만 요즘 트렌드는 거의 React 나 Vue를 같은 프레임워크를 이용하여 웹페이지를 만드는 경우가 많고
이 프레임워크들은 component 단위 (큰덩어리) 로 HTML 파일을 나눠서 코드를 짜기 때문에 다른 component 에서 같은 클래스명을 사용해도 css가 중복되지 않는다.
역시 코딩하기 좋아진 세상 🤭