CSS 좋은 습관으로 깔끔하게 작성하기

HTML은 물론 CSS 조차 몇 백줄이 나오고.. 클래스는 못찾겠고.. 뒤죽박죽인 나의 코드들..

해결점을 찾기 위해 뒤적거리다 나도 모르게 안좋은 습관을 가지고 있었다..!

CSS 안좋은 습관, 본인한테 해당되는지 한 번 확인해 보는 것도 괜찮을 듯 합니다.

---

1.HTML 기본 속성 무시하지 말기

HTML 에는 인라인 태그, 블록 태그 등 여러 태그들이 존재한다. 하지만 그 태그들의 본연의 성질을 무시하고 인라인태그에 block 요소를 주어서 굳이 크기를 주는 경우가 있는데 이것은 잘못 사용하는 예이다.

예를 들어 <span>태그는 인라인 태그 이다. 굳이 인라인 태그에다 display:block;을 준 뒤 크기를 주는 경우가 있는데 이것은 잘못 된 습관이니 고치도록 하자.

 

2. !important 난사하지 말기.

!important 는 최우선 순위로 css를 부여해주는 역할을 해준다. css의 우선 선택자 규칙을 다 무시해버리는 !important를 난사하게 되면 나중에는 !important를 계속 추가해야 되고 나중에는 충돌을 일으키게 된다.

진짜 진짜 급한 상황 아니면 사용하지 말도록 하자.

 

3. 와일드카드(*)에 의존하지 말기.

작성 초반에 와일드카드(*)를 쓰고 미리 초기화 하는 사람들이 있을 것이다. (바로 내가 그랬다.)

개인 프로젝트라면 모르겠지만 각 회사마다 가지고 있는 css 파일이 있을 수 있고, HTML 의 양이 많아지면 질수록 CSS 수정을 해야될 경우가 많은데 와일드카드(*)에 미리 초기화 다 해두고 작업을 한다면 나중에 수정하는데 시간이 오래 걸린다. 최소한의 공통 항목만 와일드 카드에 정리하고 막 사용하지 말도록 하자.

 

반응형

4. z-index 불규칙하게 사용하지 말기

예를 들어 header에는 z-index를 10주고 section에다 z-index를 5로 footer는 8로 사용하는 사람이 있을 수 있다.

z-index로 인한 문제가 발생했을 때 일일이 수정하는데 시간이 오래 걸리게 되고 일의 효율 또한 떨어지게 된다.

구분이 되는 태그 마다 주석으로 z-index의 범위를 주도록 하자.

/* header 는 1~10 까지*/
.header{
	z-index:1;
}

/* section 는 11~20 까지*/
.section{
	z-index:11;
}

 

5.인라인 방식으로 스타일링 넣기

굳이 CSS에 말고 HTML 에 style을 주는 사람이 간혹 있을 수 있다.

유지 보수 하는데에 있어서 하나하나 인라인 방식의 스타일을 고쳐주는 일은 쉬운일이 아니다.

어지간한 경우가 아닌 이상 css파일안에다가 스타일을 넣어주도록 하자.

<!-- 적절치 못한 예 -->
<div class="" style="width=100px; height100px;">
	...
</div>

/* 적절한 예*/
div {
	width:100px;
	height:100px;
}

 

6.선택자 길이는 되도록 짧게 쓰자.

해당 선택자로 가는 경로를 다 써주는 것 어떻게 가는지 보이니 좋긴하다.

다만 양이 많아진다면 이것또한 불필요한 과정에 불구하다.

따라서 해당 선택자로 가는 경로는 그전 경로 까지만 축약해서 쓰도록 하자.

/*나쁜 예*/
.header > .gnb > .sub > ul > li > a{ ... }

/*좋은 예*/
.sub > ul > li > a{ ... }

 

7. id 속성은 어지간하면 사용하지 말자.

무조건 쓰지말라는 것은 아니다. 한 번쓰고 말 css 속성이라면 상관이 없다.

id 속성은 css 우선순위 규칙에 의해 class 속성보다 한참 우선순위가 커서 먼저 적용된다.

id 속성을 css로 꾸밀 경우에는 재사용성이 떨어지기 때문에 곤란할 수도 있다.

따라서 재사용성이 좋은 class를 사용하도록 하자.

 

---

도움이 되셨다면 공감 한 번씩 부탁드려요!!

웹 공부하시는 분들 존경 존경..!!

 

HTML 안좋은 습관↓↓

 

HTML 나쁜 습관, 나도 무의식적으로 쓰고 있다.