new Vue

Project Architecture

Atomic Design System

TL;DR

• 디자인 작업도 시스템을 갖추어서 진행해야 한다.
• 결국, 컴포넌트에 대한 5단계 구분은 사람이 하기때문에 명료하지는 않다.

href

• Atomic Design의 한계를 바라보는 시선
  • Atomic Design에 대한 감사한 식견이다.
  • 결국 유기체와 원자에 대한 구분은 주관적인 이슈가 있다.
    - 이로 인한 커뮤니케이션 비용도 발생한다.

CSS

Dark Mode

const isDarkThemeOnLs = localStorage.getItem('dark');
this.isDarkTheme = isDarkThemeOnLs || window.matchMedia("(prefers-color-scheme: dark)");
const rootEl = document.getRootNode().documentElement;
rootEl.setAttribute("dark", this.isDarkTheme);

html {
  color: blue;
}

html[dark] {
  color: red;
}

방법론

BEM

SMACSS

SFC

preprocessor

SASS