[css principle] css guideline #css #guide

css-principle.md

css-principle

나의 스타일을 정리한다.

Rule

• kebab case 를 사용한다.

Keyword

• btn : 버튼
• container
• wrapper

Global

컴포넌트를 횡단하는 개체들이 충분히 큰 묶음인 경우 독립적인 컴포넌트로 정의한다. 그렇지만, 그 정도로 크지 않은 경우, global 하게 선언한다. 이후, 컴포넌트에서 사소한 overriding 을 수행한다.

Global Class

지속적으로 컴포넌트를 횡단하여 등장하지만, 따로 컴포넌트로 선언할 만큼 크지 않은(단순한 btn 등) 화면 요소들은 global 한 class로 선언한다.

분류의 기준

분류의 기준은 다음과 같이 크게 두가지로 볼 수 있다.

1. 컴포넌트 data

컴포넌트의 data 그 자체 또는 상호작용하는 동작이다.
할일 관리 앱의 컴포넌트를 예로 든다면, 다음과 같을 것이다.

• data
  • task
  • tasks
  • user
• action
  • create (add)
  • read (load)
  • update (edit)
  • delete (remove)
  • clear (delete-all, remove-all)
  • warn
  • info (notify는 목적어가 사람이므로 쓰지 않는다.)

직렬화

컴포넌트 data 는 관심사가 data, action 두개이다. 각각의 관심사가 n개의 개체를 가지므로 n vs n mapping 관계이다. 이를 직렬화하기 위해서 {data}-{action}(예 : task-create) 으로 묶을 수도 있고, {action}-{data}(예 : update-user )로 묶을 수도 있다. 이것은 상황마다 효율성이 다를 수 있으므로, 적절히 정해 사용한다. 다만, 일반적인 경우에서는 {data}-{action} 이 더 효율적으로 보인다.

깊은 직렬화

일차적으로 컴포넌트 data의 직렬화를 거친 후, 다시 detail한 목적과 행위에 따라 하위 직렬화를 다시 할 수 있다.
  예시)

• task-create-warn : task-create 시에 (데이터 무결성 위반 등으로) warn 하는 행위.
• task-create-warn-accept : 위의 경고(warn)를 유저가 받아들이는 행위.

사용 rule

• 프로젝트 내에서 CRUD 에 대응하는 기본 키워드를 일관성있게 유지한다. 기본적으로 create, read, update, delete, clear, warn, info 와 같이 위 목록에서 언급한 키워드를 사용한다.
• clear 는 복수형(예 : tasks)과만 같이 사용한다. (예 : tasks-clear )
• 가능한 한 action 으로 data 를 목적어로 받는 타동사를 사용한다. 예를 들어 notify 대신 info 를 사용한다. notify는 목적어가 사람인데, 이때 목적어가 전하고자하는 주된 내용인 개체('무엇'에 대한 알림인지)가 아니므로 사용하지 않는다. 다만, 적합한 대체어가 없는 경우는 예외로 한다.(예 : warn)
  예) user-notify (x), notify-user(x), task-info (o), task-warn (o)
• component data 직렬화는 unique 한 성질을 가지므로 이벤트명도 될 수 있다.

2. 화면 요소

화면의 요소와 그 요소의 주된 속성값(값만보고도 속성을 알수 있다. 예를 들어, 굳이 적자면, lg는 size 속성의 값이다.)이다.
다음과 같은 예를 들 수 있다.

• btn
  • lg
  • sm
• popup
  • dark

직렬화

화면 요소의 관심사는 요소 그 자체이고, 요소마다 서로 다른 종류의 종속된 속성을 가지므로 직렬화하기가 명확하다. {화면 요소}-{속성}(예 : btn-lg) 로 직렬화한다.

Class Rule

Class 명시

"컴포넌트 data 직렬화", "화면 요소", "화면 요소 직렬화.." 이 3가지 를 모두 명시한다.
아래의 예시에서 "컴포넌트 data 직렬화" 는 user-update, "화면 요소" 는 btn, "화면 요소 직렬화.." 는 btn-lg, btn-dark 이다.

<button class="user-update btn btn-lg btn-dark">유저 정보 갱신</button>

Class Styling

Global

.btn{
  &.btn-lg{
  }
  &.btn-dark{
  }
}

component

.btn{
  /* 컴포넌트에 맞게 Global .btn overriding */
  &.user-update{
    /* 컴포넌트 내에서 .user-update 와 관련된 버튼이 가지는 특수한 스타일 선언 */
  }
  &.task-create{
    /* 컴포넌트 내에서 .task-create 와 관련된 버튼이 가지는 특수한 스타일 선언 */
  }
  &.btn-lg{
    /* 컴포넌트에 맞게 Global .btn-lg overriding */
    &.user-update{
      /* 컴포넌트 내에서 .user-update 와 관련된 .btn-lg 가 가지는 특수한 스타일 선언 */
    }
  }
  &.btn-dark{
    /* 컴포넌트에 맞게 Global .btn-dark overriding */
  }
}

다른 곳에서의 참조

이 문서를 참조하는 다른 문서들은 다음과 같다.

• vue tip