출처 : NHN 엔터

✅ TOAST UI Front-end Style Guide (HTML/CSS/Scss)

올해 초 퍼블리싱 프리랜서 일을 할 때 계속 들었던 생각.

"어.. 다른 사람들도 이런 식으로 코딩하나?😗 변수명... 아 약간 구린데"

실무 경험이 없는 상태에서 바로 프리랜서로 내던져지다보니 내 코드에 대한 자신감이 없었고, 계속 다른 사람들은 어떻게 코드를 짜는지가 궁금했었다. 그래서 개발자들 영혼의 안식처 🌞Codepen과 Stack Overflow를 이리 저리 기웃거리면서 다른 사람들의 코딩 스타일을 훔쳐보곤 했었다.

자주 보이는 스타일들이 분명히 있긴 있었으나(BEM 변수명 등) 또 중구난방인 경우도 있어서 점점 더 헷갈리고 😂 이것 저것 많이 시도해보다보니 코드가 좀 지저분해지는 역효과도 있었드랬다...

그러다가 AirBnb의 스타일가이드를 접하게 되어 너무나 반가웠으나! 방대한 분량에 차일피일 미루다가 잊어버렸다 ㅋ 그리고 오늘 NHN의 TOAST UI의 코딩 컨벤션문서를 보게 되었는데 정리도 깔끔하게 잘 되어있고 분량도 그리 많지 않아서 HTML/CSS/Sass 부분을 정독했다.

대부분의 내용은 stylelint 같은 정적 분석도구로 세팅만 해놓으면 쉽게 검증할 수 있는 내용들이었고, 따로 신경써야할 법한 부분들을 눈여겨 보았다.

TOAST UI 스타일 가이드 - 눈여겨 볼 부분들 👀

1. CSS 변수명 : Kebab Case

<style>
/* Bad */
.firstSelector {}
#buttonId {}
#button-id{
...}

/* Good */
.first-selector {}
#button-id {
  ...
}
</style>

CamelCase로 작성되는 JS변수명과 구분짓기 위해서 CSS 변수명은 Kebab-case로 작성하는 것 같다.

2. Javascript 조작용 클래스와 CSS용 클래스의 분리

자바스크립트를 사용해 DOM 이벤트 핸들러를 등록할 때, 스타일 지정을 위해 사용된 클래스를 사용하지 않는다. CSS 스타일 지정과 자바스크립트 동작 제어는 서로 다른 책임을 갖기 때문에, 각각을 분리해서 관리하는 것이 유지보수 측면에서 유리하다. 이 경우 자바스크립트에서 쓸 클래스는 js-접두어를 붙이는 것을 권장한다.

<button class="btn js-submit">submit</button>

3. 태그 선택자 대신 클래스 선택자를 사용한다.

렌더링 성능을 위해 가능한 한 태그 선택자보다 클래스 선택자를 사용한다.

<style>
/* Bad */
span { ... }
  </style>

4. 선택자 길이는 최대 3개

부모 선택자를 표시해야 한다면 꼭 필요한 경우에만 작성한다.

<style>
/* Bad */
.page-container #stream .stream-item .tweet .tweet-header .username { ... }

/* Good */
.tweet-header .username { ... }
</style>

(Sass nesting으로 거의 모든 부모 선택자를 다 적었던 지난 날의 나를 반성합니다😂)

5. @import 대신 link 태그 사용

@import는 로드 속도가 link 대비 현저하게 낮다고 한다. 처음 안 사실!

내일은 ES6+ 관련 파트를 읽고 정리해 볼 예정이다.

✅ 다음주 TOEIC 대비 모의고사

어학시험이 만료된지 너무 오래 되어서 본격 구직 전에 구색이라도 갖춰놓고자 토익시험을 등록했다. (그리고 세트 할인의 유혹을 이기지 못 하고 중국어 TSC 시험도 패키지로 등록😆)

토익 시험은 다음 주, 중국어 시험은 그 다음 주.
토익 시험 전에 몸풀기로 모의고사를 봤다.

LC(29/30)

RC(21/23)

맨날 코딩 튜토리얼만 보다가 오랜만에 시험다운 시험을 보니 색다르고 재밌다.
토익 시험 보고서는 본격적으로 TSC 스크립트도 만들어서 준비해봐야겠다. 취직하면 회화수업 좀 들어서 녹슬은 중국어도 갈고 닦아야지 🌸