css 진급 학습 선택 부적

내 가 처음에 css 를 쓰기 시 작 했 을 때,그 코드 의 높 은 자유 도 는 줄곧 나 를 곤 혹 스 럽 게 했다.같은 디자인 이 다른 사람 에 게 이 루어 지면 최종 코드 는 차이 가 있 을 것 이라는 얘 기다.그러나 이 문제 가 존재 한다.만약 에 서로 다른 사람들 이 서로 다른 방법 과 코드 스타일 을 통 해 외관상 으로 똑 같은 디자인 을 실현 한다 면 누가 더 잘 했 는 지 평가 하기 어 려 울 것 이다.생각해 보 니 디자인 을 실현 하고 목적 을 달성 한 이상 css 라 는 프로그램 논리 가 없 는 코드 에서 누가 더 잘 했 는 지 설명 할 수 있 을 까?
지금 제 가 인정 하 는 관념 은 css 라 는 서술 적 언어 가 아직도 코드 상의 품질 평 가 를 가지 고 있다 는 것 입 니 다.평가 기준 은 유지 가능성(Maintainability)과 성능(Performance)입 니 다.비교적 통속 적 으로 말 하면 좋 은 css 는 개발 자의 업무 에 우호 적 이 어야 합 니 다(dev-friendly).브 라 우 저 에 우호 적 이 어야 합 니 다(browser-friendly).본 고 는 css 선택 문자 의 측면 에서 css 코드 의 질 을 어떻게 향상 시 키 는 지 설명 할 것 이다.
키 선택 문자 와 브 라 우 저의 스타일 규칙 일치 원리
css 선택 문자 의 개념 은 이전 초보 자 학습 css 우선 순위 의 시작 부분 에서 도 언급 되 었 으 며,각 스타일 규칙 에서 스타일 을 어떤 요소 에 작용 하 는 지 설명 하 는 부분,즉{}이전 부분 을 말한다.본 고 는 관건 적 인 선택 부호(Key selector)라 는 개념 을 추가 로 소개 해 야 한다.관건 적 인 선택 부 호 는 모든 스타일 규칙 이 시 작 된{이전의 마지막 선택 부호 입 니 다.다음 그림 과 같 습 니 다.

css 선택 자 는 뒤의 속성 정의 가 어떤 요소 에 작용 할 지 확인 하기 때문에 css 선택 자 에 따라 스타일 을 적용 하 는 브 라 우 저 가 존재 합 니 다.브 라 우 저의 스타일 매 칭 시스템 에 대해 David Hyatt 는 Writing Efficient CSS for use in the Mozilla UI 에서 다음 과 같은 내용 을 언급 했다.
The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.
브 라 우 저 엔진 이 스타일 이 일치 할 때 오른쪽 에서 왼쪽으로 순서대로 진행 된다 는 뜻 이다.특정한 스타일 규칙 과 구체 적 으로 일치 할 때 이 는 오른쪽 에서 왼쪽으로 가 는 과정 이 계속 되 며,전체 선택 문자 시퀀스 를 읽 고 일치 하 는 것 을 완성 하거나,어느 곳 의 일치 하지 않 아 취소 된다(그리고 다른 스타일 규칙 으로 이동).
브 라 우 저가 왜 이런 일치 순 서 를 선 택 했 는 지 에 대해 서 는 Stack Overflow 에 대한 토론 을 볼 수 있 습 니 다.대체적으로 설명 하면 가장 오른쪽 에 있 는 관건 적 인 선택 자 는 스타일 정의 가 작용 하 는 요 소 를 직접적 으로 표시 하기 때문에 오른쪽 에서 왼쪽으로 의 순 서 는 브 라 우 저 가 초기 에 일치 할 때 스타일 정의 요소 집합 을 확정 하고 특정한 요소 의 스타일 을 찾 을 때 대부분의 실제 작용 하지 않 는 선택 자 를 피 하 는 데 유리 하 다.
더 좋 은 css 선택 부 호 는 브 라 우 저 로 하여 금 스타일 매 칭 과정 에서 일치 하 는 조회 횟수 를 줄 이 고 더 빠 른 속도 로 스타일 매 칭 을 완성 하여 전단 성능 을 최적화 시 키 는 것 입 니 다.그 중에서 도 브 라 우 저의 스타일 이 오른쪽 에서 왼쪽으로 일치 하 는 순 서 를 참고 해 야 합 니 다.
css 선택 문자 의 정확 한 사용 방식 이 더 특정 합 니 다.
더 구체 적 인 관건 선택 부호
관건 적 인 선택 부 호 는 브 라 우 저 엔진 이 스타일 이 일치 할 때 가장 먼저 읽 는 부분 입 니 다.따라서 특정한 스타일 규칙 에서 더 특정 하고 구체 적 인 선택 부 호 를 사용 하면 브 라 우 저의 검색 일치 횟수 를 줄 일 수 있 습 니 다.
예 를 들 어 아래 와 같은 선택 부호:

.content .note span{}

마지막 span 은 관건 적 인 선택 부호 이 고 span 이라는 라벨 은 웹 페이지 에서 매우 많이 사용 된다.브 라 우 저 는 span 부터 선택 자 를 읽 기 시작 하면 스타일 매 칭 에 추가 작업 을 할 수 있 습 니 다.
만약 에 구체 적 으로 그 위치 에 있 는 span 요소 로 스타일 을 정의 하고 싶다 면 더 좋 은 방법 은 span 으로 class 를 명명 하 는 것 입 니 다.예 를 들 어 span.note_text 이 라 고 명명 한 다음 에 간단하게 쓰 는 것 입 니 다.

.note_text{}

class 선택 문자 사용 하기
class 선택 문자(클래스 선택 문자)는 성능 최적화 에 가장 유리 한 선택 문자 입 니 다.class 에 비해 ID 는 한 요소 에 만 정의 할 수 있 고 다시 사용 할 수 없다 는 단점 이 있 습 니 다.그 밖 에 클 라 스 만큼 좋 은 곳 은 없다.어떤 요소 가 유일한 것 인지 확인 하기 어 려 울 때 가 많다.또한,class 를 사용 하여 스타일 을 정의 하고,ID 를 자바 script 에 유지 하 는 것 은 좋 은 실천 이 었 습 니 다.가능 하 다 면 ID 로 스타일 을 정의 하지 않 습 니 다.
클 라 스 에 비해 html 에 있 는 태그 의 중복 성 이 더 크기 때문에 브 라 우 저 는 스타일 이 일치 할 때 더 많은 추가 작업 을 할 수 있 습 니 다.가능 하 다 면 css 스타일 제거(reset)를 제외 하고 태그 선택 자 를 사용 하지 않 습 니 다(요소 선택 자 라 고도 합 니 다).
선택 문자 시퀀스 단축
계승 쓰기(정확히 말 하면 css 관계 선택 문자 에 선택 문 자 를 포함 하 는 것 을 말 합 니 다)는 css 에서 자주 사용 하 는 쓰기 입 니 다.계승 쓰기 의 취 지 는 두 요소 가 모두 같은 태그 나 같은 class 이름 이 있 으 면 부모 요소 의 선택 문 자 를 넣 어 선택 문자 순 서 를 구성 하면 필요 하지 않 을 때 두 요소 의 스타일 이 서로 영향 을 주지 않도록 하 는 것 이다.예 를 들 어 .confirm_layer .submit_btn 은 class 이름 이 submit_btn 이 고 class 이름 이 confirm_layer 인 부모 요소 가 있어 서 스타일 을 사용 하 는 것 을 말한다.
그러나 요소 스타일 이 서로 영향 을 미 치지 않도록 상속 선택 자 를 마음대로 사용 할 수 있 는 것 은 아니다.앞에서 언급 한 바 와 같이 브 라 우 저 는 읽 기 가 완료 되 거나 일치 하지 않 아 취 소 될 때 까지 오른쪽 에서 왼쪽으로 모든 선택 문자 시퀀스 를 읽 습 니 다.따라서 짧 은 선택 문자 시퀀스 는 브 라 우 저가 일치 하 는 과정 을 더욱 빨리 완성 하 는 데 유리 하 다.상대 적 으로 지루 한 선택 문자 순 서 는 비효 율 적 이 라 고 생각 합 니 다.예 를 들 어:

.header ul li .nav_link{}

제안 은 다음 과 같 습 니 다:

.header .nav_link{}

일반적으로 3 층 을 넘 지 않 는 상속 등급 은 실제 개발 요 구 를 충족 시 킬 수 있다.따라서 불필요 한 계승 등급 을 줄 이 고 더 짧 은 선택 부호 서열 을 사용 해 야 한다.
그 밖 에 비교적 긴 선택 부호 서열 에 또 하나의 문제 가 있다.긴 선택 문자 의 스타일 규칙 이 있 고 css 우선 순위 의 계산 값 도 크기 때문에 나중에 새로운 스타일 로 덮어 쓰 려 면 더 높 은 css 우선 순 위 를 얻 기 위해 더 긴 선택 문자(또는 ID 사용)를 써 야 합 니 다.이것 은 성능 과 코드 의 가 독성 에 모두 불리 하 다.
체인 선택 부호 피하 기
체인 선택 부호(Chaining selectors)는 하나의 요소 에 여러 개의 선택 부 를 동시에 써 서 판정 하 는 경우 입 니 다.예 를 들 어 p.name 은 class 이름 이 name 이 고 라벨 은 p 의 요소 이 므 로 스타일 을 응용 하 는 것 을 말한다.이 판정 조합 들 은 ID 선택 자,태그 선택 자,class 선택 자의 임 의 조합 일 수 있 습 니 다.
그러나 체인 선택 부 호 는 과도 한 정의(over qualified)로 재 활용 에 불리 하고 성능 최적화 에 도 불리 하 다.예:

a#author{}

제안 은 다음 과 같 습 니 다:

#author{}

이곳 의 a 은 불필요 하 다.하나의 ID 는 하나의 요소 에 만 대응 합 니 다.이 요소 의 태그 가 무엇 인지 더 이상 강조 할 필요 가 없습니다.따로 있다

.content span.arrow{}

제안 은 다음 과 같 습 니 다:

.content .arrow{}

이곳 의 span.arrow 중 span 도 불필요 하 다.한편,이 는 브 라 우 저 가 스타일 이 일치 할 때 추가 작업 을 추가 합 니 다.클 라 스 이름 이 arrow 인 요소 의 태그 이름 이 span 인지 확인 하 는 것 도 성능 을 떨 어 뜨 렸 습 니 다.다른 한편,이 한정 을 없 애 면 .arrow 의 스타일 정 의 는 더 많은 요소 에 사용 할 수 있 고 더 좋 은 중용 성 을 가진다.그렇지 않 으 면 이 걸 사용 할 때 span 라벨 에 만 사용 할 수 있다 는 것 을 알려 줘 야 한다.
같은 이치 로 여러 class 의 체인 식 표기 법,예 를 들 어

.tips.succuss{}

이름 변경 을 권장 합 니 다.

.tips_succuss{}

이렇게 하면 브 라 우 저가 추가 스타일 매 칭 작업 을 줄 이 는 데 도움 을 줄 수 있다.
그 밖 에 IE6 에는 체인 선택 문자 의 문제 가 존재 합 니 다.여러 개의 class 선택 문자 가 함께 적 혀 있 을 때 예 를 들 어 .class1.class2.class3 은 정상 적 인 상황 에서 이 모든 class 요 소 를 동시에 가지 고 있어 야 스타일 을 적용 합 니 다.그러나 IE6 는 마지막,즉 .class3 이라는 선택 문자 에 부합 되 는 요소 만 알 고 스타일 을 적용 합 니 다.
예외 적 상황
앞에서 말 한 선택 문자 의 작성 방법 에 대한 건 의 는 브 라 우 저 렌 더 링 성능 최적화 와 코드 의 재 활용 성에 서 분석 한 이론 적 결과 일 뿐이다.실제 사용 에서 너 는 이런 내용 에 따라 엄격하게 할 필요 가 없다.예 를 들 어 클 라 스 의 intro 이라는 요소 에 있 는 모든 a 태그 요 소 를 어떤 스타일 로 추가 하려 고 한다 면 .intro a 이라는 선택 부 호 는 현명 하 다.
결어
효율 적 인 css 선택 문자 에 대한 안내 서 는 google developer 의 Use efficient CSS selectors 도 읽 을 수 있 습 니 다.
현재 현대 브 라 우 저 는 스타일 매 칭 에 있어 서도 점점 더 많은 최적화(CSS Selector Performance has changed! 참조)가 되 었 고 일부 내용 은 더 이상 걱정 할 필요 가 없습니다.그러나 합 리 적 인 css 선택 부 를 쓰 는 것 을 고려 할 필요 가 없다 는 것 은 아니다.css 선택 문자 의 성능 최적화 는 여전히 존재 하 는 일 입 니 다.당신 의 선택 문 자 는 당신 의 의 도 를 잘 나타 내야 합 니 다.마음대로 사용 하 는 것 이 아 닙 니 다.더 중요 한 것 은 이런 섬세 하고 생각 한 생각 으로 css 선택 부 를 쓰 는 것 은 어 려 운 일이 아니다.당신 이 생각 하기 만 한다 면,이러한 습관 을 형성 하면,당신 은 자 연 스 럽 게 이 방면 에서 더 잘 할 수 있 을 것 입 니 다.왜 기꺼이 하지 않 겠 습 니까?
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.