css convention에 대해서

세상에서 제일 어려운 언어는 C도 아니고 Rust도 아니고 CSS이다. 디버깅할 수 없고, 왜 작동하는지, 왜 이상하게 작동하는지 알 수 없다.또한 프로젝트의 규모가 커질 때마다 마구 잡이로 설정된 CSS는 시간을 잡아먹는 녀석이 된다.

원활한 협업을 위해서 필자가 다니는 회사에서는 아래와 같은 CSS 규칙을 따르고 있다.

 

* 아무 규칙도 없이 나열한 것이 아니다. 가장 큰 범주에서 가장 작은 범주로 내려가는 순서로 CSS 속성을 선언하고 사용하려는 의도 하에 작성된 규칙들이다.

 

1. 속성 선언 순서는 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다.

1. default 값은 선언하지 않는다.
   1. ex - flex-direction은 기본적으로 row이기 때문에 굳이 선언하지 않아도 된다.
2. 속성은 서로 관련있는 것들끼리 최대한 밀집시킨다.
3. 속성은 가능한 한 축약형을 사용하도록 한다
   1. ex1) color: #333333 -> color: #333
   2. ex2) margin-top: 4px; margin-bottom: 8px -> margin: 4px 0 8px;

• modal, tooltip, dialog등 일반적으로 다른 element들보다 위에 뜨는 경우가 일반적인 컴포넌트의 경우 z-index를 선언한다.
• z-index는 임의의 값을 넣는 것이 아니라 zIndexRespository를 활용하도록 한다.
  • 참고) https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/

 

숫자는 사용 불가하며 반드시 ABOVE, BELOW, UPPER_BASE만 사용해서 조합해야 한다.

// const BASE = 0
const UPPER_BASE = 1000
const ABOVE = 10
const BELOW = -10

// App Home : related to app home dnd
const FOCUSED_DOCUMENTS_WHEN_DND = BELOW + UPPER_BASE
const FOCUSED_DOCUMENTS_BOX = BELOW + FOCUSED_DOCUMENTS_WHEN_DND
const CANNOT_DROP_LAYER = BELOW + FOCUSED_DOCUMENTS_BOX
const APP_HOME_DRAG_PREVIEW = ABOVE + UPPER_BASE

// App Home : template modal
const TEMPLATES_MODAL = UPPER_BASE

const PROJECT_SELECT_MODAL = TEMPLATES_MODAL + ABOVE
const TEMPLATE_CREATION_LOADER = TEMPLATES_MODAL + ABOVE
const SPLITVIEWER_OVERLAY = TEMPLATES_MODAL + BELOW

// index page
const HOMEVIEW_HEADER = ABOVE + UPPER_BASE
const HOMEVIEW_DROPDOWN = UPPER_BASE
const DROP_DOWN_BACK_DROP_LAYER = ABOVE * 2 + UPPER_BASE
const DROP_DOWN = ABOVE + DROP_DOWN_BACK_DROP_LAYER
const TOOLTIP = DROP_DOWN

// scrollZone
const SCROLL_ZONE_IN_OTHER_LIBRARIES = ABOVE + UPPER_BASE
const SCROLL_ZONE_IN_PROJECT_LIST = UPPER_BASE

// sideBar
const SIDE_BAR_POPOVER = DROP_DOWN

// modal
const TEXT_RESOURCE_MODAL = ABOVE * 3 + UPPER_BASE

export {
  FOCUSED_DOCUMENTS_WHEN_DND,
  FOCUSED_DOCUMENTS_BOX,
  CANNOT_DROP_LAYER,
  APP_HOME_DRAG_PREVIEW,
  TEMPLATES_MODAL,
  PROJECT_SELECT_MODAL,
  TEMPLATE_CREATION_LOADER,
  SPLITVIEWER_OVERLAY,
  HOMEVIEW_HEADER,
  HOMEVIEW_DROPDOWN,
  DROP_DOWN_BACK_DROP_LAYER,
  DROP_DOWN,
  TOOLTIP,
  SCROLL_ZONE_IN_OTHER_LIBRARIES,
  SCROLL_ZONE_IN_PROJECT_LIST,
  SIDE_BAR_POPOVER,
  TEXT_RESOURCE_MODAL,
}