MDN이 제시하는 CSS 지침
CSS guidelines - The MDN project
나쁜 CSS 습관
1. reset.css을 사용하지 마세요.
처음부터 끝까지 서비스 전체를 만드는 프로젝트라면 상관은 없는데 기존 서비스에 추가하는 것이라면 이미 구축되어 있는 서비스의 CSS와 충돌이 일어날 수 있습니다. CSS는 우선 순위에따라 적용될 스타일이 결정됩니다. (Cascading)
그래서 같은 태그에 같은 속성을 적용하면 마지막으로 작성한 스타일이 적용됩니다.
근데 그걸 그대로 끌고 와서 기존 서비스에 적용하면 다음과 같이 적용됩니다.
<link href="기존서비스1.css>
<link href="기존서비스2.css>
<link href="reset.css>
<link href="새로운서비스.css">이렇게 되면 기존 서비스의 CSS도 꼬이고 충돌을 일으킬 수 있습니다.
2. 와일드카드(*), !important 를 사용하지 마세요.
와일드카드(*)는 전역 CSS 설정입니다. 초기화를위해 적당히 쓰는 것은 괜찮지만 많은 것들을 설정해서는 안됩니다.
그럴경우 HTML 엘리먼트 연산이 많아질수도 있다고 합니다.
/* 적당한 수준 */*
{box-sizing: border-box;
margin: 0;
padding: 0;}!important는 CSS 우선 순위 최상위에 있는 속성 강제 적용입니다.
3. ID 선택자, 태그 선택자를 사용하지 마세요.
재사용성을 위해 id, 태그 선택자가 아닌 class를 지정하여 class 선택자를 사용해야 합니다.
MDN에서는 유연성이 떨어지고 필요한 경우 재정의하기가 어려우며 클래스보다 특이성이 높다고 말하고 있고
CSS에서 ID로 요소를 선택하는 것은 안티패턴으로 간주된다고 합니다. (가능은 함)
태그 선택자 같은 경우에는 전역 CSS와 같이 스타일 적용이 될 수도 있습니다.
header h1 { ... }
section { ... } 이런식으로 작성하면 모든 페이지의 section에 동일하게 스타일이 적용됩니다. 다른 CSS와의 충돌을 피하기 위해 class 선택자를 사용해야 합니다.
4. HTML 기본 속성을 무시하지 마세요.
- span은 텍스트에만 사용
- h1, h2 태그는 최대한 초기화, 스타일 적용하지 않고 그대로 사용
- button 태그는 버튼에만 사용
태그의 고유 속성을 초기화하고 새로운 스타일을 적용하는 모습들을 꽤나 많이 보셨을겁니다.
태그의 용도와 의미를 정확하게 파악하고 사용해야합니다.
5. 선택자 길이를 길게 쓰지 마세요.
/* 안 좋은 습관 */
.container #main .section .section-slider .section-slider_img .slider_img_btn { ... }
/* 좋은 습관 */
.section-slider_img .slider_img_btn { ... }Sass 같은 경우 들여쓰기를 하다보니 변환된 css 파일을 보면 길어진 선택자들을 보실 수 있을겁니다.
이는 가독성에 굉장히 안 좋습니다. 최대 3개가 넘지 않게 제한하고, 부모 선택자를 표시해야한다면 꼭 필요한 경우에만 작성하길 바랍니다.
6. @import 사용을 피하세요.
@import 말고 link 사용월 권장합니다. 속도면애서 link가 훨씬 빠르기 때문입니다.
그리고 CSS에서 보통 웹폰트를 불러오기위해 @import를 쓰는 경우가 많습니다. 이 또한 협업에서는 안 좋습니다.
인터넷 연결이 되어있어야만 @import로 불러온 폰트를 쓸 수 있기 때문입니다.
인터넷 연결이 안되어있다면 폰트가 깨집니다.
7. z-index를 규칙있게 묶어서 지정하세요.
z-index를 처음부터 1, 2, 3, ... 순서대로 준다면 중간에 새로운 컨텐츠를 추가할 경우 모든 z-index를 다시 설정해줘야 할 것입니다. 그런 불필요한 반복을 덜고자 레이아웃별로 크게 숫자 단위를 지정해줍니다.
/* header는 10~19 사이 숫자 사용 */
.header {
z-index: 10;}
.header .btn {
z-index: 11;}
/* section은 20~29 사이 숫자 사용 */
.section {
z-index: 20;}
/* footer는 30~39 사이 숫자 사용 */
.footer {
z-index: 30;}
.footer .img {
z-index: 31;}이런식으로 규칙을 정해놓으면 .section부분에 어떠한 콘텐츠가 들어서도 footer에는 영향이 가지 않을 것입니다.
