CSS를 작성할 때 지켜야 하는 7가지 기본 원칙

1. 상대 크기 단위를 사용해라.

CSS에서 픽셀 단위 크기를 사용하는 것은 더 이상 권장되지 않습니다.

레티나 디스플레이와 4K 이상의 화면이 서서히 자리를 잡아가고, 모바일 화면과 반응형 웹 지원이 필수가 되면서 다양한 ppi(Pixel Per Inch)를 가지는 기기 지원이 CSS 작성의 필수 요소가 되어가고 있습니다.

픽셀 단위인 px 표시보다는 상대 크기 단위인 em, rem 단위를 사용해야 하고, 레이아웃 크기도 vw, vh와 같은 상대 비율을 적극적으로 사용하는 것이 좋습니다.

특히 문자와 관련된 속성들은 반드시 상대 크기 단위를  사용해야 하고,  내부 요소의 배치 크기, 여백과 같은 요소들에서도 상대 크기 단위를 사용하는 것이 좋습니다.

em과 rem 단위에 대한 기본 이해는 다음 글을 보면 도움이 됩니다.

> CSS - 반응형 웹 텍스트의 핵심 em과 rem을 이해하자

2. 중요 태그에는 ID를 꼭 적용해라.

주요 시멘틱 태그와 페이지의 주요 기능 단위로 묶인 블록, 그리고 레이아웃 주요 영역에는 태그에 ID를 부여하는 것이 좋습니다.

중요 요소에 ID를 부여하면 더 짧고 간결한 CSS를 작성할 수 있으며, 원하는 태그에도 빠르게 접근할 수 있기 때문에 렌더링 과정을 최적화하는데도 많은 도움이 됩니다.

단, 별 의미 없는 태그들에 ID를 남발하는 것은 좋지 않습니다.

3. 웹 브라우저 호환성을 유지해라.

웹 브라우저 경쟁이 구글 크롬 중심으로 고착화(70% 이상) 되면서 브라우저별 HTML/CSS 호환성을 체크하는 것이 크게 의미가 없는 수준까지 되었지만, 작성한 CSS의 웹 브라우저별 호환성을 체크하는 것은 여전히 중요합니다.

마이크로소프트 신형 엣지는 구글 크로미움 엔진을 사용하기 때문에 사실상 크롬과 완전히 같습니다. 모질라 파이어폭스 또한 구글 크롬과 호환성면에서 큰 차이를 보이지 않습니다. 크롬에서 동작하는 CSS는 파이어폭스에서도 거의 100% 그대로 보입니다. 파이어폭스에서 주의할 부분은 아주 일부 극소수 표준으로 완전히 정해지지 않은 최신 속성들 몇 가지뿐입니다.

인터넷 익스플로러는 퇴출 수순을 밟고 있기 때문에 크기 고려를 하지 않아도 됩니다. 단, 공공기관 사이트, 그리고 오래된 웹사이트들에서는 한동안 예외적으로 호환성 체크를 해야할 수 있습니다.

그리고, 현재 시점에서는 애플의 사파리 브라우저가 CSS 호환성에 가장 큰 걸림돌입니다.

애플의 사파리 브라우저는 최신 CSS 표준 지원이 상당히 느립니다.

어쨌든 업데이트는 되고 있지만, 업데이트를 그렇게 열심히 해주고 있지는 않습니다.

마이크로소프트처럼 크로미움 엔진을 가져다 쓰면 쉽게 해결이 되겠지만 애플은 언제나 자신만의 폐쇄적인 생태계와 기술을 유지해 왔기 때문에 외부 렌더링 엔진을 가져다 쓸 가능성은 현재로서는 높지 않습니다.

이미 표준으로 확정된 최신 CSS 속성들에 대한 지원이 되지 않으면서 다른 메이저 웹 브라우저에서는 잘 동작하는 웹페이지가 레이아웃이 맞지 않는 경우가 더러 발생합니다.

아이폰과 아이패드 사용자들 중 많은 수가 애플 사파리 브라우저를 사용합니다.

그래서 애플 사파리 브라우저에 대한 호환성 체크는 필수적으로 해야 합니다.

특히 반응형 웹과 모바일 기기에 대한 호환성 체크를 할 때 애플 기기에 대한 웹 호환성을 위해 사파리 브라우저 체크를 해야 합니다.

애플 사파리는 애플 기기용으로만 제공되기 때문에 호환성 테스트를 하려면 애플 기기가 있어야 한다는 문제가 있습니다. 애플 기기가 없다면 클라우드 기반으로 애플 데스크톱을 임대해서 쓸 수 있는 MacinCloud 같은 서비스를 이용하는 것도 한 가지 방법이 될 수 있습니다.

4. 코멘트를 달아라.

CSS뿐만 아니라 모든 개발 코딩에 해당되는 내용입니다.

개발자라면 코딩하면서 코멘트를 다는 게 기본이지만, 디자인적인 요소가 많은 CSS는 코멘트를 달지 않는 경우가 의외로 많습니다.

몇 백행 정도인 CSS라면 원하는 위치를 찾는 게 어렵지 않지만 1~2천행을 넘어서면 원하는 CSS 위치를 찾는게 상당히 힘들어집니다. CSS는 특성상 비슷한 구조와 내용들이 반복적으로 나오기 때문에 위치를 구분하기가 쉽지 않습니다.

최소한 영역을 구분하는 코멘트 정도라도 작성되어 있으면, 원하는 위치를 찾기가 훨씬 수월해집니다.

그리고, 아주 긴 CSS 파일이라면 최 상단 위치에 전체 CSS의 영역들을 리스트업 해서 어떤 CSS 내용을 담고 있는지 표시를 해주는 것이 좋습니다.

5. !important 속성은 정말 제한적으로만 사용해야 한다.

이 속성은 가능하면 사용하지 않는 것이 좋습니다.

특별히 예외적인 상황이 아니면 절대 추천하지 않으며, 예외적인 상황이어도 !important 없이 CSS를 구현하는 방향으로 변경을 하는 것이 좋습니다.

!important는 CSS의 상속성과 일관성을 깨트리는 가장 큰 요인중 하나입니다.

팀 단위로 CSS를 제작하거나 할 때는 특히 신중하게 사용해야 하며, 배포용 CSS를 제작할 때는 사용하지 않는 것이 좋습니다.

6. 인라인 CSS는 사용하면 안 된다.

HTML 페이지 태그에 CSS를 즉시 적용할 수 있기 때문에 별도의 CSS 파일에 작성하는 것보다 간편하고 직관적인 것처럼 보이지만, 인라인 CSS는 사용해서는 안됩니다.

예외적으로라도 인라인 CSS는 사용하지 않는 것이 좋습니다. 꼭 HTML 페이지 안에 CSS를 작성해야 한다면 헤더 영역 안에 인페이지 CSS로 모아서 "<style></style>" 태그 안에 작성을 해야 합니다.

인페이지 CSS로 작성한 CSS는 별도의 CSS로 파일로 손쉽게 옮길 수 있기 때문에 유지보수가 쉽기 때문에 그나마 낫지만, 파일로 분리한 CSS와 HTML 안에 나오는 순서에 따라 우선순위가 결정되기 때문에 임의의 위치에 배치하거나 순서를 바꾸는 것에 주의를 해야 합니다.

기본적으로 CSS를 작성할 때는 별도로 분리된 파일에 CSS를 작성해야 합니다.

7. 레이아웃 제작에 테이블을 사용하지 말아라.

최근에는 레이아웃에 테이블을 사용하는 경우가 드물지만, 과거에는 HTML 페이지의 레이아웃이나 아이템을 배치하는데 테이블을 많이 사용했습니다.

테이블은 반응형 웹과 모바일 웹에서 지원이 되지 않는 대표적인 HTML 태그 요소입니다.

따라서 테이블은 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋으며, 특히 HTML 요소들을 배치하는 용도로는 사용하지 않는 것이 좋습니다.

테이블을 꼭 사용해야 하는 경우가 아니면 플렉스(Flex), 그리드(Grid)와 같은 새로운 레이아웃, 또는 배치용 요소를 사용해야 합니다.