<HTML/CSS> 권장하는 작명법 (창의력 딸리는 사람에게 필수 😜 )

깜슝슝·2023년 4월 4일
0

HTML/CSS

목록 보기
8/13

📍 OOCSS(Object Oriented CSS)

  • 작명시 모듈단위로 나눠서 작성하는 방식
  • 작명 시 공통된 스타일에 클래스명 하나, 세부적으로 다른 스타일에 클래스명 하나를 작명하여 사용한다.
<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; 
}
  • 장점
    • CSS 코드의 양이 줌
    • 코드 짜는 시간이 단축됨.
    • 유지보수가 편리함
  • 단점 : 너무 많아진 클래스명 때문에 가독성이 떨어질 수 있다.

※ Utility class:
미리 적용시킬 세부적인 스타일을 클래스명을 만들어서 만들어두웠다가
필요 시 클래스명을 태그에 적는 것으로 적용시킴.
(스타일 1~2개만 들어있는 클래스)



📍 BEM (Block__Element--Modifier)

  1. 큰 class 가 맡고 있는 덩어리(component) 이름
    (class="덩어리이름")

  2. 바로 하위 class 에는 그 부분 역활의 이름
    (class="덩어리이름__역활")

  3. 더 하위 class 에는 세부특징 까지
    (class="덩어리이름__역활--세부특징")

<div class="product">
  <div class="product__list">
    <div class="product__list--item">
    </div>
  </div>
</div>
  • 장점: 직관적으로 클래스명만 봐도 어떤걸 뜻하는 곳인지 알 수 있음.

  • 단점: 클래스명이 너무 길어지고 복잡해져서 가독성 떨어짐.



📌 생각정리

항상 클래스 이름을 적을때 고민을 많이 하던 나 🥲
위의 방법들이라면 이름 정하기가 훨씬 쉬워지고,
협업 시 팀원들간의 소통에도 크게 도움이 될듯 싶다.

하지만 요즘 트렌드는 거의 React 나 Vue를 같은 프레임워크를 이용하여 웹페이지를 만드는 경우가 많고
이 프레임워크들은 component 단위 (큰덩어리) 로 HTML 파일을 나눠서 코드를 짜기 때문에 다른 component 에서 같은 클래스명을 사용해도 css가 중복되지 않는다.

역시 코딩하기 좋아진 세상 🤭


profile
front-end ing

0개의 댓글