협업하기 위한 CSS 컨벤션

문제 정의

CSS 협업을 하다 보면 다른 개발자가 작성한 스타일 코드를 보게 됩니다. 하지만, 사람마다 스타일을 정의하는 방식과 순서가 다르기 때문에 해당 스타일을 찾는 데 시간이 소요됩니다. 이는 작은 시간 차이처럼 보이지만, 프로젝트가 커지면 큰 시간 낭비로 이어질 수 있습니다.

따라서 CSS 컨벤션을 정하여 협업하는 개발자들 간의 혼란을 방지하고, 코드의 가독성과 유지 보수성을 향상해야 합니다.

 

CSS 컨벤션

CSS는 축약형으로 작성합니다.

// Good
padding: 0 20px;

// Bad
padding-left: 20px;
padding-right: 20px;

CSS in JS를 사용할 때는 paddingY: 20px, py: 20px와 같이 축약형을 사용하는 경우가 있습니다. 이렇게 하면 코드가 간결해지지만, 속성을 명확하게 알기 어려울 수 있습니다. 따라서 padding: 20px 0과 같이 작성하는 것이 좋습니다.

 

CSS 스타일 정의 순서

회사마다 다르지만, 일반적으로 다음 순서로 스타일을 정의합니다.

1. 위치 선정
   • 요소의 위치와 배치를 결정합니다.
   • display 프로퍼티를 사용하여 요소의 종류를 지정합니다.
   • position 프로퍼티를 사용하여 요소의 위치를 지정합니다.
   • float 프로퍼티를 사용하여 요소를 좌우로 배치합니다.
   • clear 프로퍼티를 사용하여 요소의 배치를 정리합니다.
2. 윤곽
   • 요소의 외곽을 꾸며줍니다.
   • width, height 프로퍼티를 사용하여 요소의 크기를 지정합니다.
   • margin, padding 프로퍼티를 사용하여 요소의 여백을 지정합니다.
3. 외곽 디테일링
   • 요소의 윤곽을 지정합니다.
   • border 프로퍼티를 사용하여 요소의 테두리를 지정합니다.
   • background 프로퍼티를 사용하여 요소의 배경을 지정합니다.
4. 타이포그래피
   • 요소의 글꼴과 정렬을 지정합니다.
   • font 프로퍼티를 사용하여 요소의 글꼴을 지정합니다.
   • color 프로퍼티를 사용하여 요소의 글자 색상을 지정합니다.
   • text-align 프로퍼티를 사용하여 요소의 글자 정렬을 지정합니다.

쉽게 생각하면, 큰 그림에서 디테일한 부분까지 단계적으로 스타일을 정의하는 것입니다.

.button {
  display: block;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 100;
  content: "버튼";
  width: 100px;
  height: 50px;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid black;
  background-color: #ccc;
  font-size: 16px;
  color: black;
  text-align: center;
}