가독성 좋은 코드 만들기
1. id ・ class명, 변수명, 함수명
id ・ class, 변수, 함수의 이름에서 의미가 직관적으로 드러나게 작성해해야 된다.
코드는 쓰는 경우보다 읽히는 경우가 훨씬 많다.
// bad
let value = "Tom";
let value2 = "Cruise"
// good
let firstName = "Tom"
let lastName = "Cruise"개발자가 보내는 시간 중 코드를 짜는 시간은 10% 밖에 안된다고 한다.
나머지 90% 시간은 모두 코드를 읽고 해석하면서 시간을 보낸다고 합니다.
그렇기 때문에 내가 짠 코드를 미래의 내가, 그리고 협업하는 다른 팀원들이 읽기 쉽게 만드는 일은 가장 기본이면서 가장 중요한 일이다.
따라서, 모두 명확하고 직관적인 네이밍을 통해서 가독성이 좋은 코드를 짜는 연습이 필요하다.
2. CSS 속성 순서
CSS는 서로 영향을 미치는 구조로 이루어져 있고, 이 연관관계가 코드가 길어질수록 복잡해집니다. 이러한 이유로, CSS 유지보수가 Javascript 유지보수보다 힘들다고 합니다.
그러므로, CSS 속성은 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성해주는게 좋습니다.
권장되는 속성 순서는 아래와 같습니다.
-
Layout Properties (position, float, clear, display)
-
Box Model Properties (width, height, margin, padding)
-
Visual Properties (color, background, border, box-shadow)
-
Typography Properties (font-size, font-family, text-align, text-transform)
-
Misc Properties (cursor, overflow, z-index)
3. 레이아웃은 bottom-up 방식으로 구성
레이아웃을 구성할 때는 자식요소에 따라 부모요소가 조정되도록 bottom-up 방식으로 구성해야 고생을 안한다..
bottom -up의 반대의 top -down 형식을 사용하면 자식 요소들이 추가 될때마다, 부모요소를 계속 수정해줘야하는 상황이 생긴다..
고정 height를 부여해서 레이아웃에 문제가 생기는 상황이 오지않게 하자.
