An Event Apart : CSS Best Practices (20100810)

Minneapolis MN에서 열린 Event Apart에서의 Our Best Practices Are Killiing us 라는 프레젠테이션에서 Nicole Sullivan은 사용성에 있어 수명을 다한 일반적인 CSS best practice과 장기적으로 CSS 퍼포먼스와 유지보수를 향상시키기 위해 해야할 것들을 보여주었습니다. 여기 그녀의 이야기를 요약한 내용이 있습니다 :

-------------------------------------------------------------------------------------------------------------------------------

CSS로 인한 문제들

- 퍼포먼스는 웹 경험에서 매우 중요한 부분이다. 퍼포먼스가 좋지 않으면 사람들은 적게 관심을 적게 갖게 되며, 사이트를 적게 사용하게 만든다. 많은 사이트에서 CSS는 퍼포먼스를 떨어트리는 원인이 된다.

- 페이스북은 706개의 CSS 파일을 갖고 있고, 그들은 Facebook의 푸른 색을 261번 선언하며, 548개의 다른 16진수 색상값을 사용하고, 6498번 색을 선언한다. Salesforce.com은 3669번 padding을 선언한다.

-  당신은 이런 식으로 통계를 내기 위해서 CSS 파일을 분석하기 위한 정규식인 GREP를 사용할 수 있다.

- Alexa의 상위 1000개의 사이트를 보면, 몇가지 흥미로운 데이터를 얻을 수 있다. 한 사이트는 !important를 518번 선언했다. 다른 사이트는 733번 float 엘레멘트를 선언했다. 또 다른 사이트는 889번 font-size를 선언했다. 이런 것들은 기존의 개발자나 새로운 개발자 모두에게 CSS 코드 작업을 어렵게 만든다. 이 것은 웹 전반의 문제이다.

- 우리가 각 프로젝트를 “어려울” 것이라고 생각함에도. 현재 존재하는 best practice들은 문제를 더 키울 뿐이다.

- best practice에 대해 다시 생각하고 다르게 접근해야할 시간이다. CSS는 우리가 어리석은 짓을 하던 말던 신경쓰지 않는다. 그렇지만 그것은 우리가 어리석은 짓을 해야한다고 말하는 것은 아니다.


픽셀 기반의 사이트들

- 신화 : 픽셀의 기반의 사이트들은 나쁘다. 우리는 왜 아직도 레이아웃을 픽셀로 잡고 있나? IE6는 픽셀로 되었을 때 폰트의 사이즈가 바뀌지 않는다. 결과적으로, 우리는 퍼센티지와 em을 사용해야 했다.

- 오늘날 브라우져는 페이지 줌을 사용하고 페이지(IE 7이상)내의 어느(pixels, ems, 퍼센티지)것 이든 크기를 변환한다. 그래서 픽셀로 선언된 폰트들도 사이즈 변환이 가능하다.

- 다른 것에 포함된 퍼센티지와 em은 예측이 불가능하다.

- 픽셀 기반의 폰트들은 최신 브라우져들에서는 페이지 줌을 통해 사이즈 변환이 가능하다. IE6를 사용하는 사용자가 얼마나 되는지 생각해보라.

- 만약 당신이 퍼센티지와 em을 사용해야 한다면, body나 leaf node들 사이에 있는 폰트 사이즈를 바꾸는데에만 사용하라.


엑스트라 마크업

- 신화 :  어떤 엑스트라 마크업도 추가하지 마라.

-  예측이 가능한 박스 구조는 당신이 디버그를 하기 더욱 쉽게 할 것이다. module body는 중요한 역할을 한다 : margin이 깨질 위험과  float이 깨질 위험,  형식이 새롭게 정해진 context를 만든다.

- 다른 문제들을 해결하려고 코딩을 하게 된다면 새로운 문제가 생길 것이다.

- 한번에 한가지 문제만 해결하려고 하고(마크업을 구분해라) 현명하게 마업을 추가해라. HTML 추가에 집중하지 말고, 당신이 모듈을 통해 너무 많은 것을 하려고 할 때 버그가 생긴다는 것을 명심해라

시멘틱 마크업

- 신화 : 더 시멘틱할 수록 더 좋다.

- 클래스 이름과 아이디는 검색엔진, 접근가능한 장치 혹은 사용자(다른 개발자를 제외한)이 읽는 대상이 아니다. 클래스명과 아이디를 다른 개발자들을 위해서 분명히 만들자.

- 매우 시멘틱한 클래스 명은 재사용을 막을 수 있다.더 시멘틱한 것이 항상 더 나은 것은 아니다.

- CSS는 매우 밀접하게 콘텐츠와 짝지어 진다. 반복되는 패턴들은 CSS 유지보수와 퍼포먼스에 더 나은 결과를 가져올 것이다.

- 일반적인 엘레멘트와 표현을 찾고, 그것들을 분리된 코드로 추상화하라. 알려진 것들과 모듈들의 셋에서 흔한 것들과 무엇이 다른지를 봐라.(?)

- 새롭게 형식을 만든 콘텍스트가 “나는 상자에요, 내 안에는 아무것도 없어요”라고 말한다. 이것은 float과 다양한 콘텐트를 관리하는데 매우 유용하다.

- Facebook은 그들의 뉴스 피드 안에 모든 항목들을 일반적인 개념으로 표현함으로서 파일 크기를 감소시켰다 : (gzip을 한 후에)CSS byte는 페이지당 평균 19% 감소했으며, (gzip 이전에)HTML bytes는 페이지당 44% 감소되었다.

- 이것은 퍼포먼스에 매우 좋을 뿐만 아니라, 작업량을 과 유지보수 비용을 절약한다는 것도 매우 중요하다. 반복, 중복, legacy code는 웹사이트 작업을 매우 어렵게 만든다. 이것은 눈덩이와도 같다.

- 추상화된 스타일과 더 나은 시멘틱의 중간점을 찾아라.

- 좋은 시멘틱 엘레멘트를 선택하라 :  headings, lists, paragraphs

- CSS는 화면이나 콘텐트와 강하게 결속되면 안된다.


클래스 남용

- Myth :  어떤 사람들은 ID가 class 보다 낫다고 믿는다. 그렇지만 ID들은 과도하게 구체적이 될 수도 있으며 이런 특이성은 추가의 클래스보다 더 중복의 위험이 클 수도 있다.

- 특이성은 재사용을 제한한다. 우리가 셀렉터의 세습을 사용한다면, 특이성은 빠르게 복잡해질 수 있다. 특이성은 계속 커질 것이며, 이것은 어떤 규칙이 우선시되는지 아는 것을 어렵게 만들 것이다.

- 클래스들의 순서는 어떤 것이 먼저 적용될 지 보장하지 않는다. CSS 선언의 마지막 프로퍼티 값의 쌍이 적용되는 것이 될 것이다. 스타일시트의 순서 역시 그렇다. 마지막 스타일 시트가 승자다.

- CSS 상속 : 프로퍼티들은 child 엘레멘트로 상속된다. 예를 들어 문단<p>은 body의 폰트 사이즈를 상속받는다.

- ID가 클래스보다 우선순위가 높다. 인라인 스타일은 다른 스타일 시트보다 우선된다. !important는 인라인 스타일보다도 우선적이다.

- 적대적인 작업 환경은 어떤 스타일이 우선될 지 말하기 어려워 질 때 더 심해질 것이다. 당신이 코딩할 수 있는 유일한 방법은 Firebug를 사용하는 것이고, 결국 당신이 보고 싶었던 것을 보는 것은 불가능해질 것입니다.

- 우리는 시멘틱하게 스타일이 입혀진 엘레멘트를 원하지만 우리가 필요한 방식으로 스타일을 입히곤 합니다.

- 엘레멘트의 시멘틱과 시각적인 시멘틱을 분리하여야 합니다.

- 클래스들은 더 유연해지고, 재사용성이 높아져야 합니다.

- 특이성이 낮아지도록 하세요 : ID를 피하고, 인라인 스타일과 !important를 피하십시오.

- 자손 셀렉터를 피하십시오.

- 당신이 바꾸길 바라는 엘레멘트에 클래스를 더하는 것이 부모 노드를 바꾸는 것보다 낫습니다.

- 위대한 개발자는 위대한 것을 만든다는 말은 우리가 우리의 worst best practice를 버려야 한다는 말입니다. CSS는 좋지만, 우리는 우리를 힘든 유지보수와 과도하게 복잡한 코드를 길로 빠트리는 프랙티스들을 너무 열심히 따라해왔습니다.



( *원문을 달려고 했으나 링크가 깨졌네요. 혹시 원문 링크 아시는 분은 알려주시면 감사하겠습니다.)