1.리셋
실제로 Eric Meyer Reset, YUI Reset 또는 사용자 정의 재설정 등 항상 재설정을 사용하십시오.
이는 모든 요소에서 여백 및 패딩 속성을 제거하는 것만큼 간단할 수 있습니다.
html, 본문, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
사전, 양식, 필드 세트, 테이블, td { 여백: 0;
Eric Meyer와 YUI의 Resets 스타일은 훌륭하지만 나에게는 너무 지나친 것 같습니다. 요소의 많은 속성을 재정의하기 전에 모든 것을 지우시기 바랍니다. 이것이 바로 Eric Meyer가 추천하는 것입니다. 더 효율적으로 사용하는 방법이 있다면 그의 스타일 파일을 가져다가 자신의 프로젝트에 직접 추가해서는 안 됩니다. 이를 다듬고, 다시 빌드하고, 자신만의 것으로 만드세요.
아, 다시는 이러지 마세요.
* {여백: 0;
너무 많은 곳에서 사용됩니다. 라디오 버튼의 패딩을 제거하면 어떻게 될까요? 양식 요소는 때때로 펑키한 모양을 가지므로 그대로 두는 것이 가장 좋습니다.
2. 알파벳순으로 정렬
약간의 테스트
아래 두 가지 예 중 어느 것이 margin-right 속성의 위치를 더 빨리 찾을 수 있다고 생각하시나요?
실시예 1
div#헤더 h1 {
Z-색인: 101;
색상: #000;
위치: 상대;
줄 높이: 24px;
오른쪽 여백: 48px;
테두리 하단: 1px 솔리드 #dedede;
글꼴 크기: 18px;
}
실시예 2
div#헤더 h1 {
테두리 하단: 1px 솔리드 #dedede;
색상: #000;
글꼴 크기: 18px;
줄 높이: 24px;
오른쪽 여백: 48px;
위치: 상대;
Z-색인: 101;
}
예제 2가 예제 1만큼 빠르지 않다고 말하지 마세요! 이러한 스타일의 속성을 알파벳순으로 정렬하면 일관성이 생겨 특정 속성을 찾는 데 소요되는 시간을 줄이는 데 도움이 됩니다.
어떤 사람들은 이런 식으로 순서를 정리하고, 다른 사람들은 스타일의 순서를 정리하기 위해 다른 방법을 사용한다는 것을 알고 있습니다. 하지만 우리 회사에서는 만장일치로 알파벳순으로 정렬하기로 결정했습니다. 이 접근 방식은 다른 사람들과 함께 코드를 개발할 때 확실히 효과가 있을 것입니다. 알파벳순으로 정렬되지 않은 스타일 시트를 볼 때마다 싫습니다. 왜냐하면 스타일 시트가 지저분하고 무질서해 보이기 때문입니다...