현재 프로젝트에 CSS 코드가 적용되어 있더라도 누구나 CSS 코드를 작성할 수 있습니다. 하지만 CSS가 더 나을 수 있을까요? webjx.com은 이 분야에서 다양한 기술을 소개하지만 CSS를 개선하기 위해 다음 5가지 측면을 사용하기 시작하면 더욱 전문적으로 보이고 코드가 더 좋아질 것입니다!
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 Reset과 YUI Reset은 둘 다 매우 강력하지만 나에게는 너무 지나친 것 같습니다. 결국에는 모든 것을 재설정하고 모든 요소의 속성을 다시 정의해야 할 것 같습니다. 이것이 바로 Eric Meyer가 보다 효율적인 사용(스타일시트 재설정)을 권장하는 이유이며, 재설정된 스타일시트를 사용하는 것뿐만 아니라 이를 프로젝트에 끌어다 놓는 것입니다. 이를 조정하고(재설정 스타일시트) 자신만의 재설정 스타일시트를 만드세요.
아, 다음 항목의 사용을 중지하세요.
* {여백: 0;
만드는 데 더 많은 시간을 할애하세요. 패딩을 제거하면 라디오 버튼이 어떻게 될 것 같나요? 양식 요소는 때때로 펑키한 작업을 수행할 수 있으므로 가장 효과적인 방법은 요소를 독립적으로 만드는 것입니다.
2. 정렬
작은 테스트: 이 예를 통해 올바른 여백 속성을 더 빠르게 찾는 방법에 대해 생각해 볼 수 있습니다.
예#1
div#헤더 h1 {
Z-색인: 101;
색상: #000;
위치: 상대;
줄 높이: 24px;
오른쪽 여백: 48px;
테두리 하단: 1px 솔리드 #dedede;
글꼴 크기: 18px;
}
예#2
div#header h1 { border-bottom: 1px solid #dedede; 색상: #000; 선 높이: 24px; 위치: z-index: 101;
예제#2가 올바른 여백 속성을 더 빨리 찾을 수 없다고 말할 수는 없습니다. 요소 속성을 알파벳순으로 정렬합니다. CSS를 일관되게 작성하면 특정 속성을 찾는 시간을 절약하는 데 도움이 됩니다.
어떤 사람들은 코드를 어떤 방식으로 구성하고 어떤 사람들은 다른 방식으로 구성한다는 것을 알고 있지만 우리 회사에서는 모든 코드를 알파벳순으로 구성하기로 합의한 결정을 내렸습니다. 이런 식으로 코드를 구성하면 다른 사람과 함께 작업하는 데 확실히 도움이 됩니다. 나는 속성이 알파벳순으로 정렬되지 않은 계단식 스타일 시트를 볼 때마다 움츠러듭니다.
3. 조직
관련 콘텐츠가 서로 가까이 있도록 스타일 시트를 구성하여 원하는 내용을 더 쉽게 찾을 수 있도록 해야 합니다. 보다 효율적인 주석을 사용하세요. 예를 들어, 계단식 스타일 시트를 구성하는 방법은 다음과 같습니다.
/*****재설정*****/요소의 패딩과 여백을 제거합니다.
/*****기본 요소*****/기본 요소의 스타일 정의: body, h1-h6, ul, ol, a, p 등.
/*****일반 클래스*****/ 한 쪽만 부동, 요소의 아래쪽 여백 제거 등과 같은 간단한 스타일을 정의합니다. 물론 대부분은 우리가 원하는 의미와 관련이 없지만, 코드를 효율적으로 처리하는 것이 필요합니다.
/*****기본 레이아웃*****/기본 템플릿 정의: 머리글, 바닥글 등 웹 페이지 레이아웃의 기본 요소 정의에 도움
/*****헤더*****/모든 Hearder 요소 정의
/*****컨텐트*****/컨텐츠 상자의 모든 요소 정의
/*****바닥글*****/모든 바닥글 요소 정의
/*****기타*****/다른 선택자를 정의합니다. 유사한 요소에 주석을 달고 그룹으로 분류하면 원하는 것을 더 빨리 찾을 수 있습니다.
4. 일관성
어떤 방식으로 코드를 작성하든 일관성을 유지하세요. 나는 전체 한 줄 CSS와 여러 줄 CSS 논쟁에 지쳤습니다. 논쟁할 필요가 없습니다. 모든 사람은 각자의 의견을 갖고 있으므로 원하는 작업 방식을 선택하고 모든 스타일시트에서 일관성을 유지하세요.
개인적으로 저는 두 가지를 조합하여 사용하고 싶습니다. 선택기의 속성이 3개 이상인 경우 해당 속성을 잘라내어 여러 줄로 작성하겠습니다.
div#헤더 { 부동: 왼쪽: 100% }
div#header div.column {
테두리 오른쪽: 1px 단색 #ccc;
float: 맞죠;
오른쪽 여백: 50px;
패딩: 10px;
너비: 300px;
}
div#header h1 { 부동 소수점: 왼쪽; 위치: 상대 너비: 250px }
따라서 자신이 좋아하는 작업 방식을 찾은 다음 일관성을 유지하십시오.
5. 올바른 곳에서 시작하세요
마크업 언어가 완성될 때까지 스타일시트에 접근하려고 하지 마세요.
웹 페이지 분할을 준비할 때 CSS 파일을 만들기 전에 본문 열기 태그와 본문 닫기 태그 사이에 있는 모든 문서를 미리 보고 표시해야 합니다. 추가 DIV, ID 또는 클래스 선택기를 추가하지 않습니다. 청취자, 콘텐츠, 바닥글과 같은 몇 가지 일반적인 DIV가 존재한다는 것을 알고 있기 때문에 추가하겠습니다.
문서에 먼저 태그를 지정하면 divities1 및 class2의 이미 발생한 문제에 직면하지 않을 것입니다. 달성하려는 목표를 달성하세요.*/(원문은 번역되지 않음).
CSS 하위 선택자를 사용하여 하위 요소를 지정하는 것은 요소에 클래스 또는 ID 선택자를 기계적으로 추가하는 것이 아닙니다. 기억하세요: CSS는 올바른 형식의 문서(또는 마크업 구조) 없이는 쓸모가 없습니다.
요약
이는 CSS 코드를 더 잘 작성하는 데 도움이 될 수 있습니다. 하지만 이것이 이 목록의 끝을 의미하지는 않습니다. 다음으로, webjx.com에 관심을 가져주시기 바랍니다.