Dony :)

FE로 성장 중 🌱

TIL 🧐

앞으로 3주 동안 진행하게 될 미션은 카카오페이지 클론 코딩이였다.

  • HTML,CSS를 활용하여 레이아웃 잡기
  • (시간 되면) DOM, EVENT,Templeting 활용하여 렌더링 해보기

BEM

  • BEM은 Blcok, Element, Modifier를 뜻한다.
  • 각각 __와 –로 구분한다.
  • 기본적으로 ID를 사용하지 않으며, class만을 사용한다.
  • 👍 클래스명으로 구조를 직관적으로 파악할수 있다.
  • 👎 이름이 길고 복잡해 질수 있다.
<form class="search-form">
  <div class="search-form__content">
      <input class="search-form__input"/>
      <button class="search-form__button">Search</button>
  </div>
</form>
<ul class="tab">
  <li class="tab__item tab__item--focused">탭 01</li>
  <li class="tab__item">탭 02</li>
  <li class="tab__item">탭 03</li>
</ul>

search-form => block
search-form__input => block__element
tab__item–focused => blcok__element–modifier

OOCSS

  • 구조(structure)와 모양(skin)의 분리
<div class="btn skin tel">tel</div>
<div class="btn skin">email</div>
  • 컨테이너와 컨텐츠의 분리: 스타일을 정의할때 위치에 의존적인 스타일을 사용하지 않는다.
<div class="header common-width">Header</div>
<div class="footer common-width">Footer</div>
  • 👍 공통된 부분을 찾아 어디서나 재활용 할수 있다.
  • 👎 반면에 다중 클래스 사용으로 유지보수의 어려움과 가독성이 떨어질수 있다.

Airbnb 스타일 가이드
우리는 다음과 같은 이유로 OOCSS와 BEM의 혼용을 권장합니다.

  • CSS와 HTML 사이의 명확하고, 엄격한 관계를 형성하는 데에 도움을 줍니다.
  • 재사용 가능하고, 작성 가능한 컴포넌트를 만드는 데에 도움을 줍니다.
  • 보다 적은 중첩과 낮은 특수성을 갖게 합니다.
  • 확장성 있는 스타일시트를 작성하도록 도움을 줍니다.

📌 둘 다 장단점이 있으니 BEM과 OOCSS를 섞어 응용하자!

잘했어요 🙂

CS때 너무 힘들었다가 css를 하려니 너무 반가웠다..ㅎㅎ
퍼블리셔로 근무할 때 IE때문에 사용하지 못했던 css들을 써보려하고 웹접근성도 좀 더 지키려 노력하였다.
근무하면서 배운게 많이 없다고 느꼈는데 이번 주 동안 조원들을 많이 도와주고,
질문에 대답도 많이 해줄 수 있어서 기분이 좋았다..!
CS 시간때는 너무 어려워서 질문을 못한 적도 있는데..
자신감 아주 조금 회복..! 💪
하지만 내 코드 구려병이 치료되지 않고 있다.
갈아엎고 싶다 모두 🤯

아쉬워요 🙁

heder, footer까지 만드는게 너무 오랜만이라 구조를 어떻게 짤지만 보고있었는데
CSS 네이밍 규칙을 공부하는 사람들을 보고 조금 반성했다.
flex로 해결할 수 있는 부분이라 생각하여, grid를 써보지 않았는데
궁금해하고 사용하려는 사람들이 있어서 반성했다. 솔직히 좀 아는거라 편하게 할 수 있을 줄 알았는데..
잘했어요 보다 아쉬워요, 반성했어요가 더 많았다.

빠르게 변하는 IT시대니 나도 익숙해지지 않고 새로운 것도 탐구하는 습관을 더 길러야겠다!
반성하자 도니! 바쁘다 바빠 현대사회..@_@

참고