나의 ‘CSS 관리규칙’ 을 소개합니다.
올해 초부터 ‘CSS 관리규칙’ 이라는 자료를 만들어서 팀원들과 공유하며 사용해 오고 있습니다. 그리고 그것을 지금 공개합니다. 아직 보완할 여지가 있다는 생각도 있지만 이 자료를 공개하므로서 얻는 피드백으로 하여금 그부분을 해결할까 합니다. CSS 코딩업무를 담당하고 있는 디자이너, 코더, 퍼블리셔 직군에 종사하는 분들께 공개하며 그분들의 다양한 의견을 들어볼 수 있는 좋은 기회라고 생각하고 공개합니다. 대단한것은 없습니다. 단지 팀원들과 한결같은 CSS 코드를 만들어내기 위한 목적으로 마크업 재정의 규칙, ID 네이밍 규칙, Class 네이밍 규칙 따위와 예제코드를 정리해 둔것 뿐입니다. 이 문서에 대한 피드백을 원합니다. 도와주세요! 태클 환영. 이미 절반의 태클을 예견하고 있습니다.
문서명 : CSS 관리 규칙 V1.3_060818
http://naradesign.net/open_content/document/CSS_Management_v1.3_060818.pdf
좋네요. 헌데 8번째 항목은 조금 동감하기 어렵습니다.
사이트 내에 일관된 디자인 패턴이 있다 하더라도, HTML단에서 디자인을 고려한 클래스를 부여하는 건 바람직하지 않은 듯.
그러니까, box1, box2 같은 class는 되지만, color666같은 건 아예 언급되지 않음이 더 나을 듯 합니다. (확실히 코딩할 때 속도는 좋지만, 나중에 유지보수할 때 좀 곤란.)
그다음…
media별로 link를 관리해주는 쪽이 좋고(마지막에 print.css에 대해 언급하셨지만…)
기왕이면 import를 써주는 게 좋을 수도 있겠습니다만,
현실적으로 프레임워크나 모듈별 개발을 할 때에는, 서버런타임에 동적으로 추가되는 HTML/JavaScript 모듈들과, 그 모듈들과 연관있는 CSS를 별도의 하나의 CSS파일로 컨트롤하기에는 조금 복잡합니다. 이럴려면 CSS파일도 동적으로 생성되어야 하는데 그러면 CSS의 효과가 반감되거든요.
정적인 CSS를 유지하기 위해서는 HTML문서에서 모듈 조립시, 필요한 CSS들도 모듈별로 분리해서 필요한 모듈별 CSS를 link로 연결시키는 것이 좋습니다. 그러니까, 찬명님께서 언급하신 방법은 “손코딩”시에는 괜찮지만, 규모가 큰 대형 시스템에서는 조금 곤란한 법칙이니 파일 생성규칙은 조금 융통성을 두시는 게 좋겠습니다.
친절한 eouia님, 피드백 감사합니다.^^a ‘8번 항목’ 에 대한 지적은 저도 공감합니다. 맞는말씀이구요. 이 문서를 버전업 할 때 고려하여 수정해야 할것 같습니다. 그런데 ‘그다음…’ 이라고 말씀하신 부분부터 제가 잘 이해를 못하고 있는데요 ㅡㅜ; 조금 더 쉽게 설명해 주실 수 있으신지요 ^^a 부탁드립니다. 어느부분에 대한 지적인지 감을 못잡고 있습니다. 좀더 구체적으로 부탁드립니다.
따로 정리해서 제 블로그에 포스팅하겠습니다. 조만간. :)
음.. 정리하기가 귀찮군요. ^^;;;;
예를 들어, a.html이라는 페이지에 어떤 모듈들이 추가될 지 디자인타임에는 모르는 경우가 있겠지요. 조건에 따라 X모듈, Y모듈, Z모듈 중에 1개~3개가 선택되어 a.html이 만들어진다고 합시다.
이럴 경우, screen.css에서 X,Y,Z에 관한 CSS를 모두 담고 있게 하거나(용량 낭비)
혹은, screen.css에서 동적으로 X,Y,Z중 필요한 것들만 모아 담게 하거나(프로그래밍이 필요… 한데, 이러면 CSS 캐싱의 효과가 없지요.)
뭐.. 이러겠습니다만.
차라리 그럴 바에는
site_style.css, module_x.css, module_y.css, module_z.css를 준비해두고,
HTML에서 link로 site_style.css(사이트 공통스타일)을 부르고, 또 HTML안에 포함된 모듈에 따라 module_?.css를 각각 link해주는 쪽이 좋다는 거지요.
프레임워크를 이용한 개발시, 대개 HTML 뷰에서 사용될 모듈이 결정되므로 별도의 CSS에 프로그래밍 처리를 하는 대신 모듈별 CSS를 링크해주는 방식이 필요합니다.
이부분은 JSP에서 bean을 사용한 개발이나.. 혹은 모듈별 조립식 프레임워크들(종류들도 많고 다 제각각이라서…)을 이용해보시면 이해하실 겁니다.
전에 JAVA 프레임워크를 사용하는 어떤 회사에 컨설팅해줄 때 보니, 개발자들이 CSS적용에 어려워하더라구요. 프레임워크 자체가 모듈별 조립식이라서 CSS도 모듈별 조립식에 대응되도록 분리해줄 필요가 있었지요. 문서에서 말씀하신 파일생성규칙과는 별개로 HTML안에서 불러올 때에도 모듈별로 불러오는 것이 좋다는 말입니다.
대형포털을 조직화된 CSS로 작업해본 경험은 없지만 작업 대상이 포털이라면 eouia 님 말씀이 맞는것 같습니다. 저희 팀에서 주로 참여하고 있는 분야가 공·사기관 또는 인트라넷 분야의 프로젝트라서 아래와 같은 방식으로 분할된 CSS가 포털까지 아우르기에는 다소 미진한 부분이 있겠습니다.
공통(태그재정의) /open_content/common/css/default.css
레이아웃 /open_content/common/css/layout.css
네비게이션 /open_content/common/css/navigation.css
콘텐츠영역 공통 /open_content/common/css/content.css
콘텐츠영역 섹션별 /open_content/common/css/content_섹션명.css
게시판 /open_content/common/css/board.css
프린트 /open_content/common/css/print.css
대형포털의 UI 를 만지작 거릴 수 있는 기회가 되면 모듈별 CSS 링크방식에 대하여 좀더 고민해 보겠습니다. ;)
좋은 자료 잘 보고 갑니다 ^^
공부중이였는데 , 너무 유용한 정보네요 ^^ 감사합니다.
좋은 정보 감사해여~
네, 많은 이용 부탁드립니다 ^^
아니 이렇게 좋은 자료를…. 좋은 자료 감사합니다.^^
좋은 정보 많이 보고 갑니다.
매일 들러서 몇시간씩 공부 하다가 가네요^^
대신 일을 하나도 못하고 있습니다 ㅠ
항상 느끼지만 나라디자인에서 너무 많은걸
가르쳐주시네요..
css정말 덕분에 잘이해하고있습니다.
정리 감사합니다.