CSS 주석, 이름 지정, 상속, 스타일 순서 지정 등 CSS 기술 요약_경험 교환

1. 댓글에 대하여

xhtml+CSS 웹사이트를 만들 때 CSS의 댓글은 매우 중요합니다. CSS 스타일을 만들 때 부담 없이 댓글을 다는 습관을 유지해야 합니다. 일반적으로 저는 "/*댓글내용*/" 형식으로 댓글을 작성하는데 익숙합니다. 왜냐하면 에디트플러스 같은 하이라이팅 기능이 있는 에디터에서는 C언어에서 흔히 사용하는 "/***************/"를 사용하기 때문입니다. 이런 댓글은 의미가 없고, 의미없는 내용을 분리해서 많이 채울 필요도 없습니다. 주석이 포함된 문서는 웹 사이트의 원본 CSS 문서 역할을 합니다. 웹 사이트를 게시할 때 CSS 압축 도구를 사용하여 CSS를 압축하고 출력 CSS에서 주석을 제거하여 파일 전송 효율성을 높일 수 있습니다.

2. 이름 지정에 대하여

CSS 파일 이름을 지정할 때 의미상 올바른 영어 이름이나 약어를 사용하는 것을 선호합니다. 특이한 부분에는 부분 병음 이름을 사용할 수도 있습니다. 또한 일부 종속 클래스에서는 "list_banner"와 유사한 이름, 즉 상위 요소 이름에 "_"와 요소 이름을 더한 이름을 사용할 수 있습니다.
네이밍은 팀 디자이너의 습관에 따라 협의 가능합니다. 그러나 나중에 참조할 문서를 생성할 수 있도록 이름 뒤에 설명을 추가하는 것이 가장 좋습니다.

3. 상속에 대하여

CSS에서는 상속을 잘 활용해야 합니다. 예를 들어 두 개의 중첩된 div에서 상위 요소는 background-color 속성을 검정색으로 정의합니다. 하위 요소의 배경도 검정색이면 정의를 반복할 필요가 없습니다. CSS 상속을 잘 활용하면 코드를 더욱 효율적이고 간소화할 수 있습니다.

4. CSS 정의의 계층에 대하여

CSS에서 클래스를 정의할 때 명령문을 설명하기 위해 계층적인 방법을 사용하는 것이 좋습니다.
예제 구조:

예제 소스 코드 [www.52css.com]

CSS 예시:

소스 코드 예시 [www.52css.com]
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
위의 예에서는 최종 효과에서 #menu가 반복적으로 나타날 필요가 없지만 실제로 #menu를 앞에 추가할 수 있다면, 그러면 문서의 레벨이 더 명확하고 읽기 쉬워집니다.

5. 스타일 정렬에 대하여

CSS 스타일 시트를 디자인할 때 대부분 손으로 코드를 작성하므로 클래스에서 스타일 정렬에 혼란이 생길 ​​수 있습니다. 예를 들어 여러 클래스는 패딩, 여백, 배경, 색상 및 기타 스타일을 사용하지만 정렬 시 일부 클래스는 배경이 더 높고 일부 클래스는 여백이 더 높습니다. 이것은 어느 정도 혼란을 야기하고 당신의 생각을 쉽게 좌절시킬 수 있습니다. 개인 또는 팀 디자이너가 대략적인 순서에 합의하여 개별적으로는 큰 차이가 없지만 전체적으로 읽기 및 관리가 더 쉬워지고 전반적인 효율성이 많이 향상될 것이라고 제안합니다.

예를 들어 기본적으로 앞에 width, height, padding, margin, border 등을 넣고, 그다음에 배경, 텍스트를 제어하는 ​​글꼴, 색상, 텍스트 정렬 등을 넣고, 그런 다음 목록 스타일 등과 같은 특수 태그에서만 사용할 수 있는 일부 요소와 마지막으로 CSS 필터입니다. 특별한 상황(예: 정의해야 하는 특정 CSS 속성의 우선순위)이 발생하면 유연하게 처리할 수 있습니다.​