Firefox 권장 및 개인적으로 이해하는 CSS 작성 순서_CSS/HTML

최근 작업에서 많은 문제에 직면했습니다. 그 중 가장 중요하다고 생각하는 것은 CSS가 작성되는 순서입니다. 이는 프런트엔드 작업자의 생각을 반영할 수 있습니다. 이 글을 보시면 마음속에 떠오르는 속성을 적는 것을 멈추시기 바랍니다.

먼저 Firefox에서 권장하는 쓰기 순서를 살펴보겠습니다.
* mozilla.org 기본 스타일
* fantasai에서 관리
* (마크업 가이드에 정의된 클래스 -http:// mozilla.org /contribute/writing/markup)
*/
/* 권장 순서:
//속성 표시
* 표시
* 목록 스타일
* 위치
* float
* 클리어
//자체 속성
* 너비
* 높이
* 여백
* 패딩
* 테두리
* 배경
//text 속성
* 색상
* 글꼴
* 텍스트 장식
* 텍스트 정렬
* 세로 정렬
* 공백
* 기타 텍스트
* 내용
*
*/
위 추천 순서를 보시면 아시겠지만 굉장히 체계적으로 정리되어 있습니다. 위에서 권장하는 순서에는 위쪽, 오른쪽, 아래쪽, 왼쪽 등과 같은 더 자세한 속성이 포함되지 않습니다. 일부 사람들은 이것이 성능에 영향을 미치나요?라고 묻습니다. 죄송합니다. 잘 모르겠습니다. , 하지만 나는 일을 체계적으로 하는 것이 올바른 방법이라고 생각합니다. (어쩌면 더 나은 방법이 있을 수도 있습니다.)

내 이해:
1. 표시 속성: display||visibility||list-style(list-style-type, list-style-image, list-style-position)||overflow
2. 위치 지정 및 부동 속성: position||top||right||bottom||left||float||clear
3. 상자 모델: width||height||margin||padding||border
4. 배경: 배경(배경 이미지, 배경 위치, 배경 반복, 배경 첨부)
5. 텍스트 속성: 글꼴 스타일||글꼴 변형||글꼴 무게||글꼴 크기 | |font-family||color
6. 텍스트 속성: text-indent||text-align||vertical-align||letter-spacing||word-spacing||text-transform||text-꾸밈| text-shadow
7. 기타

"당신이 이 명령을 사용하든 말든 나는 그것을 사용합니다." 모든 수정을 환영합니다