플러닝 Flearning

CSS 작성 방법 이해하기 본문

최신 기술 트렌드/HTML & CSS

CSS 작성 방법 이해하기

플러닝 2016.09.02 16:01

CSS 작성 방법 이해하기





이 글은 "Leveling up in CSS" 기사를 번역한 것입니다.


(출처: https://medium.freecodecamp.com/leveling-up-css-44b5045a2667)













CSS는 정말 근사한 언어입니다. 처음에는 CSS가 쉽다고 느껴질 수도 있습니다.


하지만 시간이 지날수록 CSS가 얼마나 복잡한 언어인지 알게됩니다.


 

CSS를 사용할 때 해야할 일이 4가지가 있는데요,


1. 적절한 시맨틱 사용하기 (Use proper semantics)


2. 모듈화하기 (Modularize)


3. 명명 규칙 사용하기 (Adopt a naming convention)


4. 단일 책임 원칙 따르기 (Follow the single responsibility principle)







적절한 의미 사용하기 (Use proper semantics)



HTML과 CSS에는 시맨틱 마크업이라는 개념이 있습니다.


시맨틱은 단어의 뜻과 그 관계를 말합니다. 


HTML에 관해서 시맨틱은 적절한 마크업 태그를 사용한다는 뜻입니다.













시맨틱 HTML은 간단합니다. 


하지만 시맨틱 CSS는 훨씬 더 추상적이고 주관적입니다.


시맨틱 CSS를 쓸 때는 구조적 의미와 기능을 전달하는 class name을 정해야합니다.


Class name은 이해하기에 쉬워야하며, 너무 구체적인 것은 안됩니다.


그렇게해야만 나중에 다시 사용할 수 있기 때문이죠.













여기 좋은 시맨틱 class name의 예시로 Medium의 CSS가 있습니다.













코드에서 보면 구조와 역할, 뜻을 알 수 있습니다.


Parent class는 stream이고 article의 목록입니다. 


Child class는 streamItem이고 목록안에 있는 실제 article입니다.


이를 통해서 Parent와 child가 어떻게 연관되어있는지 명확하게 알 수 있습니다.


또한, 그 class는 article을 포함한 모든 페이지에 쓰입니다.







HTML과 CSS를 책처럼 읽을 수 있어야합니다.


마치 등장인물과 그 관계를 말해주는 이야기처럼 말입니다.


결국 더 많은 시맨틱 CSS는 코드를 잘 유지할 수 있도록 만들어줍니다.







모듈화하기 (Modularize)



React같은 구성요소 기반 라이브러리에는, 모듈화가 가장 좋습니다.


구성요소는 해체한 인터페이스로 만든 모듈이라고 생각하면 됩니다.


아래에는 Product Hunt의 stream 첫페이지인데요,


연습으로 stream을 여러 구성요소로 나누어보겠습니다.













색으로 구분된 각 아웃라인은 구성요소들입니다.


stream안에 많은 stream item이 있습니다.













대부분의 구성요소는 더 작게 나누어질 수 있습니다.













각 stream item은 썸네일과 그에 대한 정보가 적혀있습니다.













stream 구성 요소는 독립적인 요소이기 때문에 stream class를 바꾸지 않아도


쉽게 조정하거나 post class로 바꿀 수 있습니다.



구성요소로 생각하는 것은 코드를 해제하는데 도움이 됩니다.


더 많은 코드를 해제할수록 class 간의 상호 의존성이 줄어듭니다.


이로써 코드를 더 쉽게 수정할 수 있고, 더 길게 작업을 할 수 있습니다.













CSS를 모듈화할 때에는 디자인을 구성요소로 나누는 것부터 시작하세요.


종이와 연필로 할 수도 있고, 일러스트레이터나 Sketch같은 프로그램으로 할 수도 있습니다. 


구성 요소들을 확인하면서 class 이름을 어떻게 지을 것인지 알 수 있고,


서로간에 어떻게 연관이 되는지 알 수 있습니다.



CSS위주의 구성요소에 대해서 더 알고 싶다면, 아래 링크를 확인해보세요.


CSS 아키텍쳐: Scalable and Modular Approaches 

(https://www.sitepoint.com/css-architectures-scalable-and-modular-approaches/)


Writing Modular CSS with Sass 

(http://sassbreak.com/writing-modular-css-with-sass/)


Modularizing Your Front-End Code for Long Term Maintainability and Sanity 

(http://www.berndtgroup.net/thinking/blog/development/modularizing-your-front-end-code-for-long-term-maintainability-and-sanity)







명명 규칙 (naming convention) 정하기



많은 CSS 명명 규칙이 있는데요,


어떤 사람들은 특정한 명명 규칙이 다른 것보다 더 낫다고 말합니다.


사실은 가장 좋은 명명 규칙은 사람마다 다르기 때문에, 자신에게 가장 맞는 것을 찾는 것이 좋습니다.



여기 사람들이 많이 쓰는 명명 규칙 목록이 있습니다



  • Object oriented CSS OOCSS

  • Block element modifier (BEM)

  • Scalable and modular architecture for CSS (SMACSS)

  • Atomic



제가 가장 좋아하는 명명 규칙은 BEM인데요,


BEM은 block, element, modifier의 약자입니다.













BEM은 가장 간단하면서도 엄격한 명명규칙입니다.













Block은 더 높은 레벨 class를 의미합니다.


Element는 block의 children이고,


Modifer은 다른 state를 의미합니다.













위에 예시에서 보면 "search"라는 class가 block이고,


"search button"이 element입니다.


button의 state를 수정하고 싶으면, "active"같은 modifier을 추가하면 됩니다.



한 가지 기억해야할 점은 선호하는 CSS 명명 규칙과 상관없이


주로 다른 기준에 따른 코드베이스를 쓰게 된다는 것입니다.


그렇기 때문에 항상 새로운 기준과 다른 방식들을 배우는 방법을 받아들일 수 있어야합니다.



아래 링크에서 BEM에 대해서 더 알고 싶다면 아래 링크를 확인하세요.


http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/


https://css-tricks.com/bem-101/


http://getbem.com/introduction/



또 다른 작성 방법에 대해서 배우고 싶다면 링크를 확인하세요.


http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/







단일 책임 원칙 (single responsibility principle) 을 사용하세요.



단일 책임 원칙은 각 module/class가 소프트웨어의 기능에 단일적으로 책임이 있다는 것입니다.


그리고 그 책임은 class에 완전히 요약되어야합니다.



CSS에 따르면 단일 책임 원칙은 코드, class, module이 각각 한가지 일만 해야한다는 것입니다.


CSS 파일 편성에 적용해보면, carousel과 navigation bar와 같은 


독립적인 구성 요소는 각 CSS 파일이 따로 있어야합니다.













파일 편성에서 자주 보이는 또 다른 패턴은 파일을 기능에 따라 분류한다는 것입니다.


예를 들어서 위에서 보면 carousel 요소와 관련된 파일은 그룹화되어있습니다.


이러한 방법을 쓰면 파일을 더 쉽게 찾을 수 있습니다.



구성 요소 방식에 따라 구분하는 것에 더해서,


단일 책임 원칙에 따라서 분리하는 것도 좋습니다.













위에 예시에서 보면 각 스타일은 각자의 파일로 나누어져 있습니다.


이러한 방식으로 colors를 업데이트 하고 싶다면, 어디를 봐야할지 정확히 알 수 있습니다.



어떤 파일 편성을 사용하는 지에 상관없이 단일 책임 원칙을 따르면 됩니다.


한 파일의 내용이 너무 많아진다면, 적합한 방법에 따라 나누어보세요.



파일 구조와 CSS 아키텍쳐에 대한 더 자세한 내용은 아래 링크를 확인하세요.


https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization


https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/



단일 책임 원칙은 각각의 CSS class에 적용됩니다.


이 말은 각 class가 오직 하나의 기능만 갖고 있다는 뜻입니다.


다른 말로, 필요에 따라 다른 class로 스타일을 나눠야합니다.


아래에 대표적인 예시가 있습니다.













위에 예시에서 보면, "splash" class는 프레젠테이션과 스타일링 로직뿐만 아니라 children도 포함하고 있습니다.


이 코드를 두 개의 다른 class로 분리할 수 있습니다.













이제 splash와 splash content가 생겼습니다.


splash를 포괄적인 class로 사용할 수 있습니다.


모든 child인 splash content를 parent에서 분리시킬 수 있습니다.



단일 책임 방식을 스타일링과 class에 적용시키는 것에 대해서 더 자세한 내용은 아래 링크를 참고해주세요.


http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/







복잡성보다 간단함



프론트 엔드 개발자나 CSS 아키텍트에게 물어보면


자신의 코드에 완전히 만족한 적은 없다고 말할 것입니다.


결국 좋은 CSS를 쓰는 것은 반복적인 과정입니다.


간단하게 시작해서 기본적인 CSS 규칙과 스타일 가이드를 따르고,


거기서 부터 반복해보세요.




저작자 표시
신고
0 Comments
댓글쓰기 폼