css 아키텍쳐 구성하기

 

css는 사용하기 쉽고 간편한 언어이지만 제대로 구성하고 잘 사용하기는 쉽지 않습니다.

css를 작성하고 링크시킬때 보통 head테그 안에 link를 사용해서 각각 css를 연결해주는 경우가 많습니다.

 

<link href="style.css" rel="stylesheet" />

 

혼자 사용하는 개인사이트일 경우에는 위와 같이 사용해도 문제가 없지만

하지만 대형프로젝트일 경우 여러명의 사람들이 동시에 작업해서 올리게 되면 충돌이 자주 일어나고 유지보수하는 상황에서도 스타일을 바로 찾기가 힘들어 집니다. 

 

그래서 css를 모듈화 하는 경우가 많습니다. 

화면별로 css를 나누어서 협업시에도 동시에 작업할수 있도록 해줍니다.

 

그리고 css 선택자를 작성할때 bem방식이나 대시를 사용하는것도 개인적으로 비추천합니다.

그런 방식들은 클래스로 검색시에 찾을수 없는 경우가 있고 더블클릭으로 복사 붙여넣기도 어렵습니다.

 

클래스 작성은 다른선택자와 겹치지 않게 독창적으로 사용하되 직관적으로 알수 있게끔 만들어야 합니다.

사실 클래스명 정하는게 제일 어렵죠.. 이건 다음번에 다시 이야기 하도록 하고 css 구조로 돌아가봅니다.

 

보통 유지보수를 위해서 @import를 많이 사용합니다. 

화면에 link 를 하나만 걸어두고 link된 스타일은 import만을 위한 스타일로만 사용합니다. 

 

<link href="main.css" rel="stylesheet" />

 

그럼 main.css 에는 컴퍼넌트화 된 css 파일만을 불러오기위한 css파일이 완성됩니다.

 

/* mixin */

/* 믹스인등 scss함수 */

/* plugin */

/* 외부 프레임워크 */
@import url(bulma.css);
@import url(chartist.min.css);
@import url(MonthPicker.css);

/* base */

/* 리셋 폰트 타이포 등 */
@import url(reset.css);
@import url(font.css);

/* layout */

/* 메인페이지, 서브공통으로 들어가는 기본구조 */
@import url(layout.css);

/* components */

/* 버튼,인풋,모달,페이징,탭 등 컴퍼넌트 */
@import url(components.css);

/* pages */

/* 추가로 이 페이지에서만 레이아웃이 달라질때 구분해서 작성 */

/* helper */

/* 색상, 사이즈, 여백등 강제적으로 고정시켜야 할때 헬퍼클래스 사용 */

 

 

위 샘플은 제가 작업할때 나누어 놓은 것으로 각자의 프로젝트에 맞춰서 가감해서 사용하시면 됩니다.

 

위와같은 방식으로 main.css를 작성하고 각각 하위  css에 스타일을 작성하면 됩니다.

이렇게 여러파일로 나누어서 작성하는 이유는 여러사람이 동시에 작업하기 편하고 충돌을 줄일수 있으며 스타일을 찾기 쉬워서 한눈에 관리하기 쉬워집니다.

 

css 기본구조를 작성하는게 어렵지만 처음에 구조를 잘 파악하고 지금 하고 있는 프로젝트에 어떤 것이 더 필요하고 어떤것은 필요없는지 잘 생각해서 처음에 잘 짜놓으면 앞으로의 작업이 수월해 집니다.