CSS 코딩 방법론, 4개의 거품 모델

CSS 코드를 작성하기 위한 더 나은 방식은 무엇일까? 일반적으로 하향식 접근 방법론을 사용하려는 경우에 나는 당신께 이 글을 선물하고 싶다. 나는 이 프로세스를 4개의 거품 모델이라고 부른다. 이 모델은 4개의 진보적인 구조 위에 높여져 있다. 당신이 작성하는 CSS 코드들을 조작하고 관리하는데 더 나은 방법을 제공하고, 좀 더 빠른 개발을 돕는다.

다음 그림은 4개의 주요 단계를 설명하는 것이다:

이 모델은 웹 디자이너의 최적화된 개발을 도와준다. CSS 파일 관리를 간단하게 만들고, 클래스의 수를 최소화하고, 장황하고 모순되는 선언들을 피할 수 있게 해 준다.

다음 단락은 각 단계에 대해서 간단한 설명을 포함한다.

표준화된 HTML 요소들

모델의 첫번째 단계는 HTML 표준 요소를 위한 브라우저 스타일의 재정의와 초기화를 다룬다. 초기화를 위해서 단지 나는 나의 페이지들에서 사용될 작은 요소 집합을 추가하는 것으로 시작한다. 그리고 새로운 요소가 필요할 때 점차적으로 추가한다.

body, h1, h2, h3, p, ul, li, form, input{
border:0;
margin:0;
padding:0;
}
ul{list-style:none;}

나는 표준화된 HTML 요소들을 재정의하기 위해서 동일한 접근 방식을 따른다. 예를 들어, 여기 내가 시작할 때 사용하는 HTML 요소의 기본 집합은 이렇다.

h1{...}
h2{...}
h3{...}
p{...}

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

input, textarea{...}
...

문단을 위한 <p>, 링크를 위한 <a>, 포스트 제목을 정의하기 위한 <h1>, 소제목 정의를 위한 <h2> 등이 있다.

Main sections

모델의 두번째 단계는 HTML 페이지의 구조를 만드는 주요 섹션의 정의와 관계가 있다. 오른쪽 그림은 전형적인 2단 컬럼 레이아웃의 주요 섹션이다. 나는 각 섹션을 식별하기 위해 다음과 같은 기준으로 선언한다.

#wrapper{...}
#header{...}
#nav{...}
#main{...}
#sidebar{...}
#footer{...}

다음으로, 각 섹션에 대해서 주요 섹션의 자식 요소들의 스타일을 정의한다. 예를 들어 내가 네비게이션 링크들을 사용해야 할 때 순서 없는 목록을 위해서 아래와 같은 코드를 사용한다:

#nav ul{...}
#nav ul li{...}
#nav ul li a:link{...}
#nav ul li a:visited{...}
#nav ul li a:hover{...}
#nav ul li a:active{...}

그리고 푸터의 링크들과 웹 사이트에 대한 정보(저작권같은 정보들)를 추가하기 위한 문단을 작성한다.

#footer ul{...}
#footer ul li{...}
#footer ul li a:link{...}
#footer ul li a:visited{...}
#footer ul li a:hover{...}
#footer ul li a:active{...}
#footer p{...}

사용자 정의 클래스들

모델의 세번째 단계는 웹 페이지를 제작하면서 필요한 사용자 정의 요소들을 위한 클래스들의 재정의와 관계가 있다.

사용자 정의 클래스의 한가지 예로 .right는 HTML 요소를 오른쪽으로 정렬하거나 RSS 구독 섹션의 제목을 위한 배경 이미지를 위해서 .feed-icon 클래스를 사용한다.

.right{float:right;}
.feed-icon{...}

이 단계에서 많은 불필요한 선언들이 빈번하게 추가하면서 CSS 파일들 안에 “쓰레기” 코드 라인을 만들게 된다. 불필요한 선언의 일반적인 예로 <h1> 태그를 간단히 사용할 수 있을 때 글 제목을 위해 .title 클래스를 정의하는 경우다.

코드 최적화

모델의 마지막 단계는 개발된 코드에서 불필요하거나 사용되지 않는 선언들을 제거하고, 주석의 길이를 줄이거나 속성들을 그룹화하는 등의 최적화와 관련이 있다. 마지막 단계에서 CSS 압축기를 사용해서 당신의 CSS 파일의 가벼운 버전을 만든다. 이러한 도구들은 당신이 당신의 파일 용량을 극적으로 최소화할 수 있게 많은 공백과 줄내림을 제거하는 것을 도와준다. http://www.csscompressor.com/ 이나 http://www.cssoptimiser.com/ 같은 사이트는 무료로 CSS 파일 압축을 할 수 있는 흥미로운 사이트들이다. 한가지 조언을 하자면, 만약 당신이 이런 도구들을 사용할 때 원본 파일을 덮어 쓰는 것을 피해야 한다. 그렇지 않으면 에디터를 이용해서 다시 수정하기가 매우 어려워질 수 있다.

만약 당신이 드림위버Dreamweaver와 같은 고급 에디터를 사용한다면 이것은 문제가 되지 않는다. 왜냐하면 당신은 압축된 파일들을 원본으로 바꿀 수 있는 “소스 포메팅 적용” 옵션을 사용할 수 있기 때문이다.

결론

이 모델은 매우 간단하고 직관적입니다. 또, 당신이 CSS 코딩 접근 방식을 채택하는데에도 아주 유용한 도움을 줄 것입니다. 이 모델을 향상시킬 수 있는 제안이 있다면 의견을 남겨주세요.

안토니오 루페티는 이탈리아 엔지니어, 프로 블로거, 맥 사용자, woorkup.com의 설립자다. 그는 이탈리아 로마에 살고 있다. 안토니오의 트위터 또는 그의 페이스북 프로필을 보자.

이 글과 비슷한 종류의 글은 'CSS' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.