CSS 스타일 방법론

세상은 빠르게 바뀌고 있지만 웹은 그보다 빠르게 진화하고 발전합니다. HTML5, ES6 등 프론트 개발에 필요한 것들도 발전하는데 그 중 CSS에 대해 알아보고자 합니다. 프로젝트의 규모가 점점 커져가지만 CSS만은 잘 관리가 되지 않습니다. 이에 코드 재사용, 유지보수, 확장성을 키울 몇 가지 방법을 소개합니다.

 - SMACSS

<SMACSS>

CSS의 확장 모듈 구조로 CSS프레임 워크가 아닌 스타일 가이드입니다. 재사용, 유지보수, 확장성과 Class명을 통해 어떤 스타일인지 쉽게 유추하는 것이 목적입니다. Base, Layout, Module, State, Theme로 스타일을 분류하며 기본적으로 CSS에서 지원하는 셀럭터를 사용하며 ID셀럭터는 사용하지 않습니다. 또한 !important를 사용하지 않으며 Class를 스타일에 맞게 붙입니다.

- BEM(Block Element Modifier)

<BEM>

CSS를 OOP스타일로 작성하며 ID는 사용하지 않고 오직 Class로만 작성합니다. 여기서 Block은 Element를 담고 있는 컨테이너고 Element는 특정 기능을 수행하는 컴포넌트입니다. Modifier는 Block 이나 Element의 속성으로 스타일을 지정합니다. 클래스명으로 구분을 하기 때문에 클래스가 무엇을 나타내는지 구체적이고 분명하게 작성되어야 합니다.

- OOCSS(Object Oriented CSS)

CSS 프레임워크로 CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 방식입니다. Structure / Skin , Container / Contents 이런 식으로 구조와 스타일을 분리하여 사용한다. 재사용성과 재사용으로 인한 용량 축소, 그로인한 속도 향상이란 장점이 있지만 중첩 클래스를 이용해 HTML 코드는 복잡해집니

다. 이 단점은 Sass를 함께 사용하면 해결 가능합니다.

서버리스(Serverless) 서비스 알아보기

<Serverless Architecture>

최근 들어 서버리스 서비스란 말을 많이 듣게 되었습니다. 물론 서버리스 서비스라고 해서 서버 자체가 없는 것은 아닙니다. 서버리스는 기존의 물리적 서버에서 돌아가던 서비스들이 클라우드 서버로 옮겨지고 서버 설정에 대한 부담은 줄이고 각각의 프로세스 단위에 집중하는 방식입니다. 서버 설정은 각 클라우드 업체들이 요청에 따라 서버를 확대하거나 줄이는 등의 일을 합니다. 대신 서버에서 자유롭게 확장 가능하기 위해 기존 소스에서 언어나 프레임워크에 대한 의존성을 제거

할 필요는 있습니다. 프로세스는 작은 기능 단위로 만들고 실행시키는데 사용하는 클라우드 서버에 맞도록 실행 시간과 입/출력 되는 용량을 조절해야 합니다. 아직 서버리스 서비스는 아직 성숙한 단계의 서비스는 아닙니다. 하지만 점점 기존의 서버에서 클라우드 서버로 이동 될 거라 생각됩니다.

[강추기사모음] 이 기사 보셨나요?

이 코너에서는 함께 공유하면 좋을만한 기사들을 선정해 보았습니다. 기사 제목을 선택하시면 해당 페이지로 이동합니다. 잘 알려지지 않은 기사중에서 다른 직원들과 나누고 싶은 정보가 있다면 뉴스레터 편집실로 알려 주세요.

≫ 교통 범칙금 400만 달러 아낀 무료 로봇 변호사 ‘두낫페이’ (출처:ITWorld/2016.6.29)

≫ 포켓몬 고, '콘텐츠+AR 전략' 통했다 (출처:ZDNet Korea/2016.7.11.)

≫ 실리콘밸리 임원들이 회의하는 법 (출처:ㅍㅍㅅㅅ/2016.7.5)

≫ 대기업 개발자와 파우스트 박사 (출처:ZDNet Korea/2016.7.12)

≫ 몽고DB, 어디로 가는가 (출처:ZDNet Korea/2016.7.12)

≫ 부지런한 개발자, 게으른 개발자 (출처:IT의 중심에서 블로그/2013.12.16)

≫ 정부, 1000분의 1 대축척 디지털지도도 무상개방 (출처:전자신문/2016.7.13)