1. 댓글에 대해서
xhtml+CSS 웹사이트를 만들 때 CSS의 주석은 매우 중요합니다. CSS 스타일을 만들 때 부담 없이 댓글을 다는 습관을 유지해야 합니다. 일반적으로 저는 "/*댓글 내용*/" 형식으로 댓글을 작성하는데 익숙합니다. 에디트플러스 같은 하이라이팅 기능이 있는 에디터에서는 C언어에서 흔히 사용하는 "/********"를 사용하기 때문입니다. . *******/" 등의 주석은 의미가 없으며, 의미없는 내용을 구분하여 많이 채울 필요가 없습니다. 주석이 포함된 문서는 웹 사이트의 원본 CSS 문서 역할을 합니다. 웹 사이트를 게시할 때 CSS 압축 도구를 사용하여 CSS를 압축하고 출력 CSS에서 주석을 제거하여 파일 전송 효율성을 높일 수 있습니다.
2. 명명에 대하여
CSS 파일의 이름을 지정할 때 의미상 올바른 영어 이름이나 약어를 사용하는 것을 선호합니다. 특이한 부분에는 부분 병음 이름을 사용할 수도 있습니다. 또한 일부 종속 클래스에서는 "list_banner"와 유사한 이름, 즉 상위 요소 이름에 "_"와 요소 이름을 더한 이름을 사용할 수 있습니다.
네이밍에 관해서는 팀 디자이너의 습관에 따라 협의할 수 있습니다. 하지만 나중에 참조할 문서를 생성할 수 있도록 이름 뒤에 설명을 추가하는 것이 가장 좋습니다.
3. 상속에 대하여
CSS에서는 상속을 잘 활용하세요. 예를 들어 두 개의 중첩된 div에서 상위 요소는 background-color 속성을 검정색으로 정의합니다. 하위 요소의 배경도 검정색이면 정의를 반복할 필요가 없습니다. CSS 상속을 잘 활용하면 코드를 더욱 효율적이고 간소화할 수 있습니다.
4. CSS 정의 수준에 대해
CSS에서 클래스를 정의할 때 명령문을 설명하기 위해 계층적 방법을 사용하는 것이 좋습니다.
예제 구조:
| 인용된 내용은 다음과 같습니다. <div id="메뉴"> <div 클래스="메뉴리스트"> <div class="selectit"></div> </div> </div> |
CSS 예:
| 인용된 내용은 다음과 같습니다. #메뉴 { ... } #menu .menulist { ... } #메뉴 .menulist .selectit { ... } |
위 예시에서는 최종 효과부터 #menu 가 반복적으로 나타날 필요가 없지만, 실제로는 #menu 를 앞에 추가할 수 있게 되면 문서 계층 구조가 더 명확해지고 읽기 쉬워집니다.
5. 스타일 정렬 정보
CSS 스타일 시트를 디자인할 때 우리는 대부분 손으로 코드를 작성하는데, 이는 클래스의 스타일 순서에 혼란을 야기할 수 있습니다. 예를 들어 여러 클래스는 패딩, 여백, 배경, 색상 및 기타 스타일을 사용하지만 정렬 시 일부 클래스는 배경이 더 높고 일부 클래스는 여백이 더 높습니다. 이것은 어느 정도 혼란을 야기하고 당신의 생각을 쉽게 좌절시킬 수 있습니다. 개인 또는 팀 디자이너가 대략적인 순서에 합의하여 개별적으로는 큰 차이가 없지만 전체적으로 읽기 및 관리가 더 쉬워지고 전반적인 효율성이 많이 향상될 것이라고 제안합니다.
예를 들어 기본적으로 너비, 높이, 패딩, 여백, 테두리 등을 앞에 배치하고 배경, 글꼴, 색상, 텍스트 정렬 등을 제어하는 텍스트를 배치하고 그 다음에는 텍스트를 제어할 수 있는 특수 태그를 배치합니다. 목록 스타일 등과 같은 요소와 마지막으로 CSS 필터만 사용할 수 있습니다. 특별한 상황(예: 정의해야 하는 특정 CSS 속성의 우선순위)이 발생하면 유연하게 처리할 수 있습니다.