[CSS]권장 작성법

Refactoring 세션에 배운 것

CSS part.

 

• css 유지보수가 javascript유지보수보다 힘듦
• 권장 속성순서
  • 레이아웃에 영향을 많이 주는 순서 >>>> 적게 주는 순서
  • 인접 속성끼리 묶어서

1. Layout Properties (position, float, clear, display)
2. Box Model Properties (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. Misc Properties (cursor, overflow, z-index)

 

• 가독성을 위해 다른 CSS 선택자들 사이에서 한 줄 씩 공백을 주는게 좋음

// 권장하지 않는 예
p, span, div, a{
    font-family: sans-serif;
} // <<< 이렇게 따닥따닥 붙이지 말 것
button{
    border:none;
}
a{
    color:#000;
    text-decoration:none;
}

 

• 불필요한 style 사용하지 않기
  예) <p> 요소에  display:block이나 width:100% 등을 작성하는 것
  • CSS Defult Values Reference 참고

 

• 레이아웃 속성은 bottom-up 방식으로 구성
  • 부모의 요소에 자식을 가두는 top-down방식보다
    자식의 크기에 따라 부모요소가 반응할 수 있는 bottom-up방식이 유지보수에 유리함.

 

 

:: css컨벤션 (= style Guide) 는 회사마다 다름.

권장은 권장일 뿐 회사에서 정한 규칙을 따르면 됨.

• 어떨 땐('')을 쓰고, 어떨 땐("")을 쓰는지
• 공백은 몇 칸인지
• id는 camelCase/snake_case/kebab-case를 사용하는지 등 

Google CSS Guide (링크)

NHN TOAST UI - FE CSS Guide (링크)