<div id="readability-page-1" class="page"><article id="mainContent">
 
 <cite>DarrenKwonDev</cite>
 2021. 11. 20. 22:36
 
 <div>
 세상에서 제일 어려운 언어는 C도 아니고 Rust도 아니고 CSS이다. 디버깅할 수 없고, 왜 작동하는지, 왜 이상하게 작동하는지 알 수 없다.또한 프로젝트의 규모가 커질 때마다 마구 잡이로 설정된 CSS는 시간을 잡아먹는 녀석이 된다.
원활한 협업을 위해서 필자가 다니는 회사에서는 아래와 같은 CSS 규칙을 따르고 있다.

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

<ol data-ke-list-type="disc">
<li>속성 선언 순서는 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다.</li>
</ol>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="707" data-origin-height="466">
 
 <img src="https://k.kakaocdn.net/dn/1j160/btrlDfDL0nx/lPaJsiaNs92Zvxdvs1NAO0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="707" data-origin-height="466">
 
 
</figure>
<ol data-ke-list-type="disc">
<li>default 값은 선언하지 않는다.
<ol data-ke-list-type="disc">
<li>ex - flex-direction은 기본적으로 row이기 때문에 굳이 선언하지 않아도 된다.</li>
</ol>
</li>
<li>속성은 서로 관련있는 것들끼리 최대한 밀집시킨다.</li>
<li>속성은 가능한 한 축약형을 사용하도록 한다
<ol data-ke-list-type="disc">
<li>ex1) color: #333333 -&gt; color: #333</li>
<li>ex2) margin-top: 4px; margin-bottom: 8px -&gt; margin: 4px 0 8px;</li>
</ol>
</li>
</ol>
<ul data-ke-list-type="disc">
<li>modal, tooltip, dialog등 일반적으로 다른 element들보다 위에 뜨는 경우가 일반적인 컴포넌트의 경우 z-index를 선언한다.</li>
<li>z-index는 임의의 값을 넣는 것이 아니라 zIndexRespository를 활용하도록 한다.
<ul data-ke-list-type="disc">
<li>참고) <a href="https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/">https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/</a></li>
</ul>
</li>
</ul>

숫자는 사용 불가하며 반드시 ABOVE, BELOW, UPPER_BASE만 사용해서 조합해야 한다.
<pre id="code_1637415155033" data-ke-language="javascript" data-ke-type="codeblock"><code>// 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,
}</code></pre>

 
 
 </div>
 

 </article></div>

HotHandCoding

DarrenKwon

세상에서 제일 어려운 언어는 C도 아니고 Rust도 아니고 CSS이다. 디버깅할 수 없고, 왜 작동하는지, 왜 이상하게 작동하는지 알 수 없다.또한 프로젝트의 규모가 커질 때마다 마구 잡이로 설정된 CSS는 시간을 잡아먹는 녀석이 된다.
원활한 협업을 위해서 필자가 다니는 회사에서는 아래와 같은 CSS 규칙을 따르고 있다.
 
* 아무 규칙도 없이 나열한 것이 아니다. 가장 큰 범주에서 가장 작은 범주로 내려가는 순서로 CSS 속성을 선언하고 사용하려는 의도 하에 작성된 규칙들이다.
 
속성 선언 순서는 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다.
default 값은 선언하지 않는다.
ex - flex-direction은 기본적으로 row이기 때문에 굳이 선언하지 않아도 된다.
속성은 서로 관련있는 것들끼리 최대한 밀집시킨다.
속성은 가능한 한 축약형을 사용하도록 한다
ex1) color: #333333 -> color: #333
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,
}

css convention에 대해서

댓글