목적

CSS 스타일링 가이드는 더 좋은 협업과 스타일링에 대한 지식을 기록하기 위해 작성되었습니다. figma나 sketch app에서 제공하는 CSS 코드는 불필요한 항목들도 존재하기 때문에 CSS에 대한 더 높은 이해도가 필요합니다.

사실 어렵지 않고 규칙성만 잘 설정해둔다면, 훨씬 수월하게 작업할 수 있어요.

CSS 코딩 컨벤션

<aside> ☝ 컨벤션의 순서는 브라우저가 요소를 그려내는 과정과 비슷합니다. 요소의 위치 > 보여지는 방식 > 크기 > 요소의 테두리 > 타이포그래피 > 색상 ...

</aside>

1. position
2. float
3. display
4. width / height
5. margin / padding
	 > top, left, right, bottom
6. border
7. color / font / text
8. background
9. content

CSS 코딩 컨벤션은 유지보수와 시인성 측면을 고려한 규칙입니다. 꼭 지켜야만 하는 규칙은 아니며 권장하는 규칙이다 라고 인지해주시면 좋습니다.

클래스

prefix?

벨루가에서 생성한 컴포넌트는 클래스명의 가장 앞부분에 vlg-라는 prefix를 사용합니다. 외부 디자인 시스템을 사용할 때, CSS 코드간 충돌이 생기지 않도록 하는 것이 목적입니다.

// 벨루가 전용 필터
.filter {
	width: 200px;
	height: 200px;
	background-color: red;
}

// 외부 디자인 시스템 필터
@import '외부 디자인 시스템';
.filter {
	width: 250px;
	padding: 20px;
	text-align: center;
}

// 구현되는 결과
.filter {
	width: 250px;
	height: 200px;
	padding: 20px;
	text-align: center;
	background-color: red;
}

// 벨루가에서 사용되는 전용 필터의 클래스명을 .vlg-filter로 변경하면 문제 X
// 가장 바깥의 부모 요소에만, prefix를 사용합니다.
.vlg-filter {
	.icon {}
	.filter-name {}
}

이러한 상황을 방지하기 위해 prefix를 사용합니다.

클래스명