로드 속도를 높이기 위해 여러 CSS 선택기 그룹화
효율성은 성공적인 웹 사이트에서 중요한 요소입니다. 해당 사이트 는 이미지를 온라인으로 사용하는 방법 에서 효율적이어야합니다. 이렇게하면 방문자가 사이트에서 실적이 좋고 기기에서 빠르게로드 될 수 있습니다. 효율성은 전반적인 프로세스의 일부가되어야하므로 사이트를 일정과 예산에 맞추어 진행할 수 있습니다.
결국 효율성은 해당 사이트의 CSS 시트 용으로 작성된 스타일을 포함하여 웹 사이트 제작 및 장기적인 성공의 모든 측면에서 중요한 역할을합니다. 더 가볍고 깨끗한 CSS 파일을 만들 수 있다는 것이 이상적이며,이를 달성 할 수있는 방법 중 하나는 여러 CSS 선택기를 함께 그룹화하는 것입니다.
그룹화 선택기
CSS 선택기 를 그룹화하면 스타일 시트에서 스타일을 반복하지 않고도 여러 스타일 요소에 같은 스타일을 적용 할 수 있습니다. 두 개 또는 세 개 이상의 CSS 규칙을 사용하는 대신 (예 : 빨간색의 색상을 설정하는 등) 모두 동일한 작업을 수행하는 대신 페이지에 대해 수행 할 단일 CSS 규칙이 있습니다.
이 "선택자 그룹화"가 페이지에 도움이되는 데는 여러 가지 이유가 있습니다. 첫 번째 도피, 스타일 시트가 작아지고 더 빨리로드됩니다. 틀림없이, 로딩 사이트가 느릴 때 스타일 시트는 주요 원인 중 하나가 아닙니다. CSS 파일은 텍스트 파일이므로 최적화되지 않은 이미지와 비교할 때 매우 긴 CSS 시트조차도 파일 크기가 작습니다. 그래도 약간의 계산만으로도 CSS의 크기를 줄이고 페이지를 훨씬 빠르게로드 할 수 있다면 항상 좋은 방법입니다.
일반적으로 사이트의 평균로드 속도가 3 초 미만입니다. 3 ~ 7 초는 평균이며, 7 초 이상은 너무 느립니다. 이러한 낮은 수치는 귀하의 사이트를 달성하기 위해 가능한 모든 것을해야한다는 것을 의미합니다. 따라서 그룹화 된 CSS 선택기를 사용하여 사이트를 신속하게 유지할 수 있습니다.
CSS 셀렉터를 그룹화하는 방법
스타일 시트에서 CSS 선택기를 함께 그룹화하려면 쉼표를 사용하여 그룹화 된 여러 선택기 를 스타일에서 분리 하십시오. 아래 예제에서 스타일은 p 및 div 요소에 영향을줍니다.
div, p {color : # f00; }쉼표는 기본적으로 "및"을 의미합니다. 따라서이 선택자는 모든 단락 요소와 모든 나누기 요소에 적용됩니다. 쉼표가 누락 된 경우 대신 해당 단락의 하위 항목 인 모든 단락 요소가됩니다. 이것은 매우 다른 종류의 선택기입니다. 따라서이 쉼표는 실제로 선택기의 의미를 변경합니다!
어떤 형식의 선택자든지 다른 선택자와 그룹화 할 수 있습니다. 이 예에서 클래스 선택기는 ID 선택기로 그룹화됩니다.
p.red, #sub {color : # f00; }따라서이 스타일은 class 애트리뷰트가 "red"인 모든 단락과 ID 속성이 "sub"인 모든 요소 (어떤 종류를 지정하지 않았으므로)에 적용됩니다.
단일 단어 인 셀렉터와 컴 und 런트 셀렉터를 포함하여 원하는 수의 셀렉터를 그룹화 할 수 있습니다. 이 예제에는 네 가지 선택자가 포함되어 있습니다.
p, .red, #sub, div a : 링크 {색상 : # f00; }따라서이 CSS 규칙은 다음에 적용됩니다.
- 모든 단락 요소
- 클래스가 "red"인 요소는
- ID가 "sub"인 모든 요소
- 부서의 부속물 인 앵커 요소의 "링크"의사 클래스입니다.
마지막 선택자는 복합 선택자입니다. 이 CSS 규칙의 다른 선택기와 쉽게 결합되어 있음을 알 수 있습니다. 이 규칙으로이 4 개의 선택기에서 # f00 (빨간색)의 색상을 설정합니다. 이는 동일한 결과를 얻기 위해 4 개의 개별 선택기를 작성하는 것이 좋습니다.
선택기를 그룹화하는 또 다른 이점은 변경해야 할 경우 여러 CSS 규칙 대신 하나의 CSS 규칙을 편집 할 수 있다는 것입니다. 즉,이 방법을 사용하면 장래에 사이트를 유지 관리 할 때 페이지 무게와 시간을 절약 할 수 있습니다.
모든 선택기를 그룹화 할 수 있습니다.
위의 예제에서 알 수 있듯이 올바른 선택기를 그룹에 배치 할 수 있으며 모든 그룹화 된 요소와 일치하는 문서의 모든 요소는 해당 스타일 속성을 기반으로 동일한 스타일을 갖습니다.
일부 사람들은 코드의 가독성을 위해 그룹화 된 요소를 별도의 줄에 나열하는 것을 선호합니다. 웹 사이트의 모양과로드 속도는 동일하게 유지됩니다. 예를 들어 쉼표로 구분 된 스타일을 한 줄의 코드에서 하나의 스타일 속성으로 결합 할 수 있습니다.
th, td, p.red, div # firstred {color : red; }
또는 명확하게하기 위해 개별 라인에 스타일을 나열 할 수 있습니다.
th,
td,
p.red,
div # firstred
{
색깔 : 빨강;
}
여러 CSS 선택기를 그룹화하는 데 사용하는 방법으로 사이트 속도를 높이고 장기간 스타일을 쉽게 관리 할 수 있습니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 5/8/17에 편집 됨.