[HTML/CSS] CSS Architecture

 

 

 

udemy : Advanced CSS and Sass: Flexbox, Grid, Animations and More!

/ Jonas Schmedtmann

 

 

 

---

 

 

 

 

HTML을 마크업을 하며 당연히 CSS를 생각 해야하는데 이 CSS를 설계할 때 어떻게 하면 더 효율적으로 할 수 있는가에 대해

 

THINK - BUILD - ARICHITECT

 

---

 

1. THINK (Component -Driven Design)

 

- Modular building blocks

- Re-usable 

- Independent

 

CSS를 생각할 때 블럭 단위로 구상할 것, 같은 속성을 가지고 있는 것들은 재사용할 것, 그리고 독립적이어야 할 것.

 

 

 

 

2. BUILD (with meaningful class names)

 

BEM : Block Element Modifier

- Block: Standalone component that is meaningful on its own

- Element: Part of a block that has no standalone meaning

- Modifier: A diffierent version of a block or an element

 

.block__element--modifier

 

Jonas의 JS 강의를 들으면서 className을 왜 이렇게 길게, 그리고 복잡하게 했을까라는 의문이 들었는데, 그는 이 방식에 따라 className을 설정해서 그런 것이었다-! 강의를 듣고 나니, 이렇게 하면 Sass를 이용할 때도 더 편리하단 걸 알게 되었다. 이름이 길다는 단점을 뛰어넘는 className이라는 생각이 들었다. 

 

Block은 그 자체로 의미 있는 것에 부여를 하는 것이고, Element는 Block의 하위요소, 그리고 Modifier는 Block이나 El와 같은 속성이나 다른 버전.

<header class="header">
  <div class="header__text-box">
    <h1 class="header-primary">
      <span class="header-primary--main">Outdoors</span>
      <span class="header-primary--sub">is where life happens</span>
    </h1>

    <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
  </div>
</header>

BEM 방식으로 작성한 className

위 코드에서 Block은 "header", "header-primary", "btn"

Element는 "header__text-box"

Modifier는 "header-primary--main", "header-primary--sub", "btn--white", "btn--animated"

 

 

구글링하다가 이 BEM 방식에 대해 매우 잘 정리해놓은 분이 있어서 링크공유

https://nykim.work/15

 

 

 

 

3. ARCHITECT

- The 7-1 pattern: 7 different folders for partial Sass files, and 1 main Sass file to important all other files into a compiled CSS stylesheet.

 

 

[The 7 folders]

 

base / 스타일하며 필요한 기본적인 것들 (animation, base, typography...)

component / 특징적인 요소 (buttons...)

layout / 각각의 레이아웃 (header, main, aside...)

page / 특별한 style 페이지 같은 것

themes

abstract / (function, mixin, variable...)

vendor /  The 3rd library

 

 

main.scss 파일을 만들고 여기에는 import만 하고, 필요한 파일들을 각각 만들어 폴더에다가 보관하는 것. 

 

기능을 그리 많이 필요로 하지 않는 것들만 해봐서 이렇게까지 세세하게 나눠야 하나 싶었는데 큰 프로젝트를 하게 되면 코드가 어마무시하게 증가하기 때문에 때에 따라 코드를 찾거나 수정할 때 이런 식으로 분류하는 것에 익숙해진다면 조금 더 일을 수월하게 할 수 있어 나눠서 한다고 했다.