처음 클론코딩을 하기에 앞서, 좀더 기초적인 것들을 짚고 넘어가야겠다고 생각해서 읽어 본 문서들이 있다.
그 중 더 좋은 CSS를 작성하기 위한 팁이라는 제목으로 작성된 글을 나중에 다시 보더라도 이해하기 쉽도록 정리하고자 한다.
1. 선택자 사용의 명확성
DRY원칙 (Don't Repeat Yourself)
말 그대로 반복을 피할 수 있으면 피하라는 말이다. 공통적으로 묶을 수 있는 부분이 있다면 공통 규칙을 작성하고, 추가적으로 필요한 규칙이 있다면 다른 클래스를 추가해 작성하는 것이 좋다.
직관적인 네이밍 사용하기
CSS 선택자의 이름을 직관적으로 작성하면 네이밍만 보고도 어떤 섹션의 코드인지, 무엇인지 이해가 빠르고 쉽다.
.p {
font-size: 20px;
}
.myButton {
width: 20px;
height: 20px;
border-radius: 6px;
} //camelCase이렇게 작성하는 경우도 있지만 좋지 않은 코드로 보고 있다. 우선 P라는 선택자가 무엇을 가르키는 것인지 명확하지 않을 뿐더러 HTML에서 단락을 나타내는 태그이기 때문이다.
.myButton 같은 경우는 이렇게 작성하는 것을 카멜케이스라고 하는데 권장하지 않는 네이밍규칙이라고 설명하고 있다. 가독성이 떨어지고 대부분 HTML 요소의 속성들은 소문자와 하이픈(-)을 사용하여 네이밍을 하는데, 카멜케이스를 사용하면 HTML과의 일관성이 떨어져 유지보수에 용이하지 않은 이유로 권장하지 않고 있다.
2. CSS 파일 분리
인라인 스타일 (inline-style) 사용하지 않기
인라인 스타일(inline-style)은 HTML 요소 내에 직접 style 정보를 포함하여 작성하는 것을 말한다. 예를 들면,
<div style="font-size: 16px; color: red;">aaa</div>이런 식으로 작성하는 것이다.
이런 방식으로 작성하는 것을 권장하지 않는 이유에는 여러가지가 있다.
첫 번째 이유는 유지보수가 어렵고 재사용이 힘들다는 점이다.
무슨 말이냐면, HTML 요소 내에 직접 스타일 정보를 포함하기 때문에 여러 요소에 동일한 스타일을 적용하려는 경우, 각 요소를 개별적으로 수정해야 하는 번거로움이 발생한다. 그리고 인라인 스타일은 한 요소에만 적용되기 때문에 다른 요소에도 적용을 시키려면 중복된 스타일을 계속해서 작성해줘야 하므로 재사용성 부분에서 기능이 떨어진다.
두 번째 이유로는 우선순위의 복잡함이 있다.
브라우저는 여러 스타일 규칙이 동일한 요소에 적용되는 경우, 우선순위를 판단하여 최종 스타일을 결정하는데 인라인 스타일은 !important를 제외하고 CSS의 다른 선택자보다 우선 순위가 높다. 그렇기 때문에 스타일의 충돌이 발생할 수 있고, 이 문제를 해결하기 위해 !important를 사용해야만 하는 문제가 발생할 수도 있다. (!important를 사용할 수밖에 없는 일도 있긴 하겠지만 웬만하면 !important 사용을 지양하는 것이 좋다.)
세 번째 이유는 가독성이 떨어진다는 점이다.
인라인 스타일이 어쨌든 간단한 스타일링을 할 때는 편리할 수는 있지만 HTML 코드 내에 섞여있기 때문에 코드가 길어지거나, 스타일 정보와 내용이 혼재되면 코드의 가독성이 떨어지고 코드를 이해하기 어려운 문제가 발생할 수 있다.
이러한 문제들을 해결하기 위한 방법으로 스타일 정보를 외부 CSS 파일로 분리하여 사용하는 방법이 있다.
!important 사용 지양하기
특정 요소에 긴급한 스타일 수정이 필요한 경우나, 스타일을 임시로 변경하고 테스트하는 경우에는 사용하면 간편하게 해결할 수 있는 장점이 있지만 왜 지양해야 하는지에 대해 나열해보려고 한다.
인라인 스타일에 대해 설명하면서 한 번 언급했지만, !important는 가장 높은 우선순위를 가진다. 때문에, !important를 남용하면 코드의 가독성과 유지보수가 어려워진다. !important를 사용한 스타일을 추적하기가 어려울 수 있기 때문이다. 그리고 스타일의 충돌이 발생할 수 있고, 스타일의 우선순위가 더 복잡해질 수 있다.
최대한 !important 사용을 피하고, 구체적인 선택자를 사용하여 스타일 충돌을 최소화하는 것이 가장 좋은 방법이다.
CSS 전처리기 활용하기
Sass나 Less 같은 CSS 전처리기는 일반적인 CSS 문법에 변수와 Nesting 규칙, mixin, 함수, 조건문과 반복문 등 추가적인 기능을 제공해주어 중복을 줄이고, 구조화된 스타일 규칙을 작성할 수 있어 가독성을 높여준다. 또한 스타일 시트를 여러 파일로 분할하고 모듈화하여 관리할 수 있어 더 효율적으로 작성하고 관리할 수 있도록 도와준다.
물론 전처리기를 사용하기 위해 추가 기능 및 문법을 익히는 데에 시간을 투자해야 한다는 단점이 있지만 전처리기를 활용하여 작업을 해본 결과 작업적인 부분에서도, 파일 관리 부분에서도 편리한 점이 훨씬 많았다.
3. 약어 사용
약식 속성은 여러 다른 CSS 속성을 축약하여 설정할 수 있는 방법으로, 코드 작성을 간결하게 만들고 코드의 가독성을 향상시킬 수 있으며 스타일을 빠르게 지정할 수 있게 해준다.
또한, 약식 속성은 특정한 스타일 속성들의 조합에 대해 미리 정의된 규칙에 따라 작동이 되는데 아래의 예시로 비교해볼 수 있다.
아래의 CSS는 약식 속성을 사용하지 않은 경우다.
.article-container {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
border-width: 1px;
border-style: solid;
border-color: black;
}약식 속성을 사용한 CSS는 아래와 같다.
.article-container {
padding : 10px 15px 20px 15px; // top, right, bottom, left;
margin: 10px 15px; //top & bottom, left & right;
border: 1px solid black; // width, style, color
}이렇게 약식속성을 사용하면 코드가 간결해지고 편리한 점도 있지만, 사용상 주의할 점도 있다.
약식 속성을 사용하면 값이 지정되지 않은 부분에 기본 값이 적용되는 경우가 있을 수 있고, 기존에 설정한 스타일을 덮어쓰는 경우가 발생할 수도 있다.
예를 들면,
.article-container {
font-weight: normal;
font : italic bold 16px/1.5 Arial, sans-serif;
}이렇게 작성했을 때 font-weight가 개별적으로 설정한 normal이 아니라 약식속성으로 설정된 bold로 덮어써진다는 말이다. 약식속성을 사용할 때에는 이런 점을 유의하여야 한다.
4. 명확한 주석 작성
명확한 의도와 설명을 가지고 작성된 주석은 유지보수 및 협업에 큰 도움을 줄 수 있다.
물론 지나치게 많은 주석은 가독성을 떨어트리고 코드를 복잡하게 만들고, 부적절하게 사용된 주석은 오히려 혼란을 야기할 수 있으니 적절하게 사용하는 것이 좋다.
제일 좋은 것은 주석 없이도 코드 자체만으로 명확하게 설명이 될 수 있게 작성하는 것이다.
그러나 주석을 작성해야 할 때에는 필요한 정보를 제공하고 의도와 기능을 명확하게 설명할 수 있도록 작성해야 한다.
* 작성하면서 느낀점
작성하다 보니 이걸 읽고 시작했는데도 직접 작업을 할 때 왜 이런 부분들을 고려하지 않았을까 싶은 부분들이 있었다. 특히 약어사용이 그랬다. padding이나 margin, border는 손에 익어서 그렇게 작성하는데, font 규칙을 작성할 때는 font-style, font-weight, font-size, line-height, font-family를 따로 적는 게 익숙하다 보니 생각을 아예 못 했던 것 같다.
다음에 작업할 때에는 이런 부분들도 좀더 생각해보고 작업을 해야겠다는 생각을 했다.
