CSS 속성 작성 순서 | CSS Coding Convention

🤫 코딩 컨벤션이란?
읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약
즉, 내부적인 공동의 약속이기 떄문에 내부적으로 정하기 나름이다.

CSS 속성 기술 순서 (w. 모질라)

1. display (요소의 노출 여부/표현 방식)
2. list-style
3. position (위치/좌표)
4. float
5. clear
6. width / height
7. padding / margin
8. border / background
9. color / font
10. text-decoration
11. text-align / vertical-align
12. white-space
13. other text
14. content

왜 이런 CSS 기술 순서가 필요할까?

예를 들어, button이라는 클래스명에 css가 여~~~러줄이 들어가게 되면

내가 어디에 무슨 css 코드를 썼는지 찾기도 힘들 것이다.

나만의 컨벤션이 있어도 좋지만 대중적으로 쓰는 컨벤션을 지켜주는 게 좋다.

.button {
    min-width: 300px;
    height: 70px;
    background-color: chocolate;
    box-shadow: 0 14px 0 brown, 0 20px 14px rgba(0, 0, 0, 0.2);
    position: absolute;

    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -150px;
    border-radius: 10px;
    border: none;
    outline: none;
    transition: 0.4s;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    font-weight: 700;
}

// 위를 속성별로 정리해보면!
.button {
	display: flex;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    min-width: 300px;
    height: 70px;
    
    margin-top: -35px;
    margin-left: -150px;
    
    border: none;
    border-radius: 10px;
    outline: none;
    background-color: chocolate;
    box-shadow: 0 14px 0 brown, 0 20px 14px rgba(0, 0, 0, 0.2);
    
    font-size: 24px;
    font-weight: 700;
    color: white;
    
    cursor: pointer;
    transition: 0.4s;
}