50 CSS Best Practices & Guidelines to Write Better CSS

50 CSS Best Practices & Guidelines to Write Better CSS

더 나은 웹을 만들기 위해서 CSS는 아주 필수적이고 실제로 잘 짜여진 CSS구조를 만드는건 쉽지 않음...

위 링크에선 50가지의 가이드라인을 소개하지만 그 중에서 좀 인상 깊었던 것 위주로 정리

• 전/후처리기 이용하기
  • for 유지 보수 & 성능
  • 대표적인 전처리기 Sass/SCSS
    • CSS에서 선택자를 사용하여 따로따로 값을 지정해주던 것들을 좀 더 보기 쉬운구조로 쓸 수 있게 도와줌 -> html과 대응해서 생각하기 좋음

    /* css */
    .div { ... }
    .div a { ... }
    /* SCSS */
    .div {
      ...
      a {
        ...
      }
    }

    • Sass는 위 SCSS보다 먼저 나왔고 동일한 형태지만 세미콜론과 중괄호를 쓰지 않음 -> 파이썬처럼 들여쓰기로 구분
  • 후처리기
    • 보통 파일을 크기를 줄이거나 쓰이지 않는 값들을 삭제하는 경우가 많음(https://cssnano.co/)
    • 다양한 브라우저에 적용할 수 있도록 플러그인을 적용해주기도 함(https://github.com/postcss/autoprefixer)
• Reset or Normalize
  • Reset (https://meyerweb.com/eric/tools/css/reset/)
    
    • 정해진 것은 없지만 사진을 보면 모든 값을 다 0으로 만들겠다는 것이 보임
    • 특히 semantic같은 것에 기본으로 지정되어있는 속성들을 다 삭제하겠다는 것
    • 이런 기본 값이 따로 있으면 이후 내가 값을 지정할 때 원하는대로 나오지 않을 수도 있음
  • Normalize (https://nicolasgallagher.com/about-normalize-css/)
    • 사파리, 크롬, 파이어폭스 등 다양한 브라우저가 있는 만큼 각 브라우저마다 다양한 기본 셋팅이 존재
    • 다른 브라우저라도 같은 모습이 보일 수 있도록 만들어준다! (reset과는 약간 다름)
• 구조화된 CSS 만들기
  • 이후 잘 찾아갈 수 있도록 기능과 목적을 적절히 분리하여 작성 필요
    • 재사용성 ↑ && 반복되는 css 구문 ↓
    • 주석을 이용해서 의미를 표시할 수 있겠지만 최소한으로 필요한 주석만을 작성하는게 좋아보임 -> 주석 없이도 이해 잘 되는 코드!
    • tailwind.css 라이브러리와 같은 것도 존재
      class 이름으로 css 속성을 부여할 수 있어 한 눈에 잘 보임
  • 프로퍼티를 계속 덮어 씌우는 형태는 좋지 않음 -> tracking이 고되다...
• CSS variable 사용하기
  • 재사용성 ↑ && 유지 보수 good
  • 그래서 보통 :root에 변수 지정해주는 경우가 많음
  • 다른 언어들처럼 숫자만 저장하지 않고 단위까지 모두 저장

    :root {
      --main-color: #080;
    }
    .class {
      color: var(--main-color);
    }

• 크기와 위치를 숫자(픽셀 단위 같이) 직접 지정 X
  • 보통 크기는 내부 컨텐츠의 크기+현재 요소의 padding
  • 위치는 외부 요소의 padding 같은 것에 의해 결정
  • 결국 이 또한 유동적인 웹을 위한 것
• 연산 시간에 대한 인지
  • 아무리 성능이 좋아졌어도 연산이 많이 필요한 프로퍼티를 반복적으로 수정하면 그만큼 repaint를 해야하기 때문에 힘들어함당연...
  • size와 같은 layout을 수정하는 것은 아래 후손들에게도 영향이 가기 때문에 다른 값을 수정하는 것보다 더 많은 연산을 필요
• outline 프로퍼티 지우지말기 none
  • tap키 등을 눌러 이동하는 사용자가 있기 때문에 어딜 포커싱하고 있는지 알려줘야함
  • 더 나은 사용자 경험!
• shorthand 사용하기
  • 이유는 역시 팔로우업 하기 편해서, 여기저기 흩어져있으면 찾기 힘듦
  • 사각형에 관련된 것은 보통 top/top-left부터 시작해서 시계방향

그리고 당연한 얘기들...

• ID 남발 금지
• 예전과는 달리 화면의 크기가 아주아주 다양해졌기 때문에 최대한 유동적인 웹을 만들고 반응형 디자인을 하는 것이 좋음, px나 pt 사용을 지양하자는 것도 그런 의미
• 불필요한 css 사용XX -> 파일 크기만 커짐
  • 후처리기 이용