CSS를 작성하는 방법

CSS 코드를 명확하고 명확하게 작성하는 것이 매우 중요합니다. 이 부분이 주요 소개입니다.

일반적으로 페이지당 하나의 CSS만 참조하지만 대규모 프로젝트의 경우 CSS 파일을 분류해야 합니다.

CSS의 성격과 목적에 따라 CSS 파일을 "공개 스타일", "특수 스타일", "스킨 스타일"로 나누어서 이 순서대로 참조할 수 있습니다. 그럼 그들은 무엇입니까?

공개 스타일은 가장 중요한 부분입니다. 상대적으로 작은 프로젝트의 경우 CSS를 하나만 소개합니다. 이 CSS의 스타일은 일반적으로 "태그 재설정 및 기본값 설정"(다른 브라우저를 제거하기 위해)을 포함합니다. 브라우저 간의 차이점), "배경 이미지의 통합 호출 및 균일하게 처리해야 하는 부동소수점 또는 기타 긴 스타일의 삭제(각각 별도로 처리할 필요가 없도록)", "웹사이트의 범용 레이아웃", "유니버설 모듈 및 확장", "구성 요소 및 확장", "기능 스타일", "스킨 스타일".

특수 스타일이란 유지 관리가 용이하도록 유지율이 높은 컬럼이나 전체 웹사이트와 크게 다른 페이지에 이러한 특별한 스타일을 독립적으로 도입하는 것을 말합니다.

스킨 스타일은 스킨 체인징 기능이 필요한 제품을 의미하므로 색상, 배경 등을 추출하여 여기에 넣어야 관리가 용이합니다.

CSS 파일을 공개 스타일, 특수 스타일, 스킨 스타일로 구분합니다. 그러면 CSS 파일을 내부적으로 어떻게 분류할까요? (이 부분이 핵심입니다)

재설정 및 기본 CSS 코드입니다. 이는 기본 스타일과 브라우저 간의 차이를 없애고, 일부 태그의 초기 스타일을 설정하여 추후 작업의 중복을 줄이기 위함입니다. 자신의 웹사이트 요구 사항에 따라 설정하거나 Yahoo 엔지니어가 제공한 CSS 초기화 코드와 같이 다른 사람이 작성한 일부 초기화 코드를 사용할 수 있습니다. 이 코드 부분은 CSS 상단에 배치됩니다.

균일하게 처리된 CSS 코드. 여기에서 배경 이미지를 균일하게 호출하고 플로트를 지울 수 있습니다(더 다양한 레이아웃, 모듈 및 원본 문서의 명확한 콘텐츠 참조). 실제로 Yahoo 엔지니어가 제공하는 CSS 초기화 코드에는 플로트를 지우는 CSS 코드가 포함되어 있습니다. . 코드의 이 부분은 재설정 및 기본 CSS 코드 아래에 배치됩니다.

레이아웃(그리드): 페이지를 일반적으로 머리글, 본문, 기본 열, 옆 열, 꼬리 등을 포함하는 여러 개의 큰 블록으로 나눕니다. 일반적으로 사용됩니다!

모듈: 재사용할 수 있는 더 큰 의미 전체입니다. 탐색, 로그인, 회원가입, 목록, 댓글, 검색 등 일반적으로 사용됩니다!

컴포넌트(단위): 일반적으로 세분화할 수 없는 비교적 작은 개체이며 버튼, 입력 상자, 로딩, 차트 등 다양한 모듈에서 재사용됩니다. 일반적으로 사용됩니다!

기능: 일반적으로 사용되는 스타일을 쉽게 사용할 수 있도록 자주 사용되는 스타일을 분리하여 필요에 따라 사용합니다. 일반적으로 이러한 선택기는 플로트 지우기와 같은 고정된 스타일 성능을 갖습니다. 일반적으로 사용되지 않으며 남용되지 않습니다!

스킨: 피부 타입 스타일을 추출하기 위해 피부 변화 웹사이트에 사용해야 합니다. 피부 변화가 없는 웹사이트는 남용될 수 없으며 일반적으로 사용되지 않습니다.

상태: 일부 상태 스타일. 일반적으로 사용되지 않습니다.

css 명명 규칙

중요: 클래스 선택기, 도랑 ID 선택기를 사용하세요. ID는 페이지 내에서 고유하기 때문에 ID를 선택자로 사용하여 CSS를 작성하면 재사용이 불가능하고 개인 정보 보호 수준이 높지 않습니다. 그래서 자바스크립트에서는 주로 HTML에서 ID를 선택하고, CSS에서는 클래스만 사용하고 ID는 전혀 사용하지 않습니다. 이렇게 하면 성능과 동작을 함께 혼합하는 대신 실제로 분리합니다.

그럼 후손 선택자를 어떻게 사용하나요? 단일 문자 + "-"가 앞에 붙지 않고 길이가 2보다 크거나 같은 클래스 선택자가 후손 선택자라는 점에 동의합니다. 예: .g-date .u-rightArrow{ float: right;} 이는 부적절합니다. .u-rightArrow{ float: right;}로 직접 작성할 수 있습니다. 그리고 의미론적 태그는 자손 선택자가 될 수도 있습니다. 예를 들어.m-list li{}입니다. 이전 문장은 의미가 없는 태그는 .m-list div{}와 같은 하위 항목 선택기로 적합하지 않음을 의미합니다.

css 코드 형식

1. 선택자, 속성, 값은 모두 소문자입니다.

이 점은 매우 중요합니다. xhtml 사양에 따르면 모든 태그 속성과 값은 소문자여야 하며 xhtml이 더 표준적이라는 것을 알고 있으므로 이를 따르는 것이 가장 좋습니다. 선택자는 소문자여야 합니다. 이 경우에는 카멜 표기법을 사용하여 클래스 이름을 작성할 수 없습니다. 예를 들어 class="u-leftArrow"는 실제로 불규칙적이며 동일한 의미를 표현할 수 있는 class="u-left_arrow"를 작성하는 것이 좋습니다.

2. 선택기 정의를 한 줄로 완성합니다.

장점: 선택기를 찾고 읽기 쉽고, 새 선택기를 삽입하고 편집하기 쉽고, 모듈을 식별하기 쉽습니다. 더 중요한 것은 중복된 공백을 제거하여 코드를 간결하게 만들고 줄 바꿈을 줄일 수 있다는 것입니다. 각 줄에 하나의 속성 이름과 속성 값만 있는 경우 대규모 프로젝트의 경우 선택기를 찾아 읽는 것이 어려울 수 있습니다. 한 줄에 선택기를 작성하면 1/6으로 단축될 수 있습니다. 1/10, 이것은 여전히 ​​매우 객관적입니다.

3. 마지막 값도 세미콜론으로 끝나야 합니다.

사실 중괄호 끝 앞의 값은 세미콜론을 생략할 수 있지만, 그렇게 하면 수정, 추가, 유지관리 작업에서 불필요한 실수와 번거로움이 발생하게 됩니다. 예를 들어, 끝에 속성을 추가하는 경우 이전에 끝에 세미콜론을 추가하지 않았다면 새로 추가된 속성 앞에 세미콜론을 추가해야 합니다. 그렇지 않으면 예를 들어 my 중 하나에서 오류가 발생합니다. 블로그 게시물에서 중국어 글꼴이 사각형으로 표시되는 문제를 해결했습니다. 이 문제는 상자에 JSON 데이터를 추가할 때 발생했습니다.

위 내용은 CSS를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!