[CSS] CSS 리팩토링 (feat. 컨벤션)

Dongmin Lee·2023년 1월 10일

HTML&CSS

목록 보기

19/20

💿 이 글의 목적

이 글을 왜 쓰는지, 어제 westagram 로그인 페이지 구현을 위해 직접 작성한 css를 통해 알아보자

* {
  background-color: rgb(250, 250, 250);
}

.div-container {
  position: relative;
  border: 2px solid rgb(227, 227, 227);
  margin: 100px auto;
  width: 400px;
  height: 500px;
}

.input-container {
  margin-top: 10px;
}

.div-container,
h1,
button,
a,
.input-container {
  background-color: white;
}

button {
  margin-top: 15px;
}
h1 {
  font-family: "Lobster", cursive;
  font-size: 60px;
  text-align: center;
}

input {
  height: 40px;
  border: 1px solid rgb(244, 244, 244);
  border-radius: 5px;
}

.input-container,
.div-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

input {
  padding: 10px;
}

input,
button {
  width: 300px;
}

#input-pw {
  margin-top: 7px;
}

button {
  border: 0;
  border-radius: 4px;
  background-color: rgb(196, 225, 250);
  height: 35px;
  color: white;
  font-size: 15px;
}

a {
  position: absolute;
  bottom: 20px;
  text-decoration: none;
  color: rgb(0, 38, 111);
}

중구난방으로 쓰다보니 중복으로 사용한 선택자가 많았고 수정하는데 애로사항이 굉장히 많았어서 오늘은 꼭 리팩토링을 하기로 마음 먹었다.

💿 리팩토링 방법

구 선생님께 자문을 구해본 결과, 회사의 컨벤션에 맞춰서 작성한 css가 가장 좋다는데 나는 무직이기 때문에 여러 컨벤션들을 짜깁기해 나만의 컨벤션을 만들고, 이에 맞춰 리팩토링을 하기로 했다. 어차피 나는 어떤 방법이 더 바람직한지 모르고 컨벤션 자체가 일관성을 위해 만들어진 것이기 때문에 우선 일관성만 챙기기로 했다.

💾 클래스 이름 부여 규칙

캐멀 케이스를 지양하고 케밥 케이스를 지향한다.
해당 클래스가 부여된 요소가 특정 요소들을 담고 있다면 'div-cnt' 따위로 표현한다.
(wrap이랑 container의 차이를 아직 잘 모르겠어서 일단 컨테이너만 쓴다..)

💾 선택자 정렬 기준

HTML에 태그를 작성하는 순서와 최대한 동일하게 정렬하기로 했다. 여러 태그에 중복으로 들어가는 선택자는 상단으로 빼고, 태그와 해당 태그의 클래스 모두 작성해야하는 경우 태그 먼저, 컨테이너-아이템 클래스의 경우 컨테이너를 먼저 작성한다.

💾 프로퍼티 정렬 기준

layout(position, float, clear, display)
box model(width, height, margin, padding)
visual(color, background, border, box-shadow)
typography(font-size, font-family, text-align, text-transform)
etc(cursor, overflow, z-index)

💾 태그 vs 클래스 vs 아이디

태그 자체가 시맨틱 요소를 가지고 있는 경우와 해당 태그가 한번만 쓰일 경우 태그를 선택자로 하고, 최대한 아이디를 선택자로 사용하는 것을 피한다.

💿 리팩토링 결과

* {
  background-color: rgb(250, 250, 250);
}

h1 {
  background-color: white;
  font-size: 60px;
  font-family: "Lobster", cursive;
  text-align: center;
}

.main-cnt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  height: 500px;
  margin: 100px auto;
  background-color: white;
  border: 2px solid rgb(227, 227, 227);
}

.input-cnt {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  background-color: white;
}

input {
  width: 300px;
  height: 40px;
  padding: 10px;
  border: 1px solid rgb(244, 244, 244);
  border-radius: 5px;
}

.input-pw {
  margin-top: 7px;
}

button {
  width: 300px;
  height: 35px;
  margin-top: 15px;
  color: white;
  background-color: rgb(196, 225, 250);
  border: 0;
  border-radius: 4px;
  font-size: 15px;
}

a {
  position: absolute;
  bottom: 20px;
  color: rgb(0, 38, 111);
  background-color: white;
  text-decoration: none;
}

리팩토링 전에 속성이 같은 선택자들을 묶어 사용했어서 코드의 길이가 짧아지진 않았지만 훨씬 보기 편함!

💿 Reference

https://velog.io/@maketheworldwise/CSS-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94%EA%B0%80