CSS 약어는 CSS 파일의 크기를 효과적으로 줄일 수 있습니다.

웹 사이트 유용성의 주요 지표는 속도, 더 정확하게는 방문자의 브라우저 창에 페이지가 얼마나 빨리 나타나는지입니다. 웹 서버 속도, 방문자의 인터넷 연결, 브라우저가 다운로드해야 하는 파일 크기 등 속도에 영향을 미치는 많은 요소가 있습니다. 서버와 연결 속도를 제어할 수는 없지만 웹 사이트의 웹 페이지를 구성하는 파일의 크기는 제어할 수 있습니다.
웹사이트 속도를 높이기 위해 웹 빌더는 정기적으로 웹사이트의 모든 이미지 파일을 압축하고 최적화하며 파일 크기를 몇 퍼센트 포인트 줄이기 위해 이미지 품질을 희생하는 경우도 많습니다. CSS 스타일 시트는 일반 텍스트 파일이고 이미지에 비해 상대적으로 작기 때문에 웹 빌더는 CSS 스타일 시트 파일의 크기를 줄이기 위한 조치를 취하는 것을 거의 고려하지 않습니다. 그러나 CSS 약어 및 기타 간단한 트릭을 사용하면 스타일 시트의 크기를 크게 줄일 수 있습니다. 내 스타일시트에 대한 비공식 임시 테스트에서 파일 크기를 약 25-50% 줄였습니다.

CSS의 축약된 특성 사용

CSS 단축 속성은 여러 관련 속성 집합을 대체하는 데 사용되는 특수 속성 이름입니다. 예를 들어, 패딩 속성은 padding-top, padding-right, padding-bottom 및 padding-left의 약자입니다.

단축 속성을 사용하면 여러 속성/속성 쌍을 CSS 스타일시트의 한 줄의 코드로 압축할 수 있습니다. 예를 들어 다음 코드를 고려해보세요.


이를 일부 약어 속성으로 바꾸면 코드가 다음과 같이 줄어들 수 있으며 두 가지의 실제 효과는 정확히 동일합니다.


또한 축약된 속성에는 여러 속성이 있으며 각 속성은 축약된 속성에 결합된 일반 속성에 해당합니다. 속성은 공백으로 구분됩니다.
여백 속성의 선형 측정과 같이 속성에 유사한 값이 있는 경우 약식 속성을 따르는 속성의 순서가 중요합니다. 속성의 순서는 상단(상단 테두리는 비어 있음)에서 시작하여 상자를 중심으로 시계 방향으로 계속됩니다.
약어 속성의 모든 속성이 동일한 경우 단일 속성을 나열하고 앞에 4번 복사하면 됩니다. 따라서 다음 두 속성은 동일합니다.


마찬가지로 테두리 여백 또는 간격 속성 다음에 오는 두 가지 속성을 사용하여 위쪽/아래쪽 및 오른쪽/왼쪽 속성 쌍을 나타낼 수 있습니다.


서로 다른 값인 경우 속성의 순서는 중요하지 않습니다. 따라서 테두리 색상, 테두리 스타일, 테두리 너비 등의 속성은 순서에 관계없이 개요 속성을 따를 수 있습니다. 속성을 무시하는 것은 스타일 규칙에서 해당 일반 속성을 생략하는 것과 같습니다.
다음은 CSS 약식 속성과 해당 속성이 나타내는 일반 속성 목록입니다.

배경 : 배경첨부, 배경색상, 배경이미지, 배경위치, 배경반복
테두리: 테두리 색상, 테두리 스타일, 테두리 너비
border-bottom(하단 테두리): 하단 테두리 색상, 하단 테두리 스타일, 하단 테두리 너비
border-left(왼쪽 테두리): 왼쪽 테두리 색상, 왼쪽 테두리 스타일, 왼쪽 테두리 너비
border-right (오른쪽 테두리): 오른쪽 테두리 색상, 오른쪽 테두리 스타일, 오른쪽 테두리 너비
border-top (상단 테두리): 상단 테두리 색상, 상단 테두리 스타일, 상단 테두리 너비
큐(사운드 큐): 프리 큐, 포스트 큐
세례반: 세례반, 글꼴 크기, 글꼴 스타일, 글꼴 두께, 글꼴 변형, 줄 높이, 글꼴 크기 조정, 글꼴 스트레칭
list-style: 목록 스타일 이미지, 목록 스타일 위치, 목록 스타일 유형
여백(공백): 위쪽 여백, 오른쪽 여백, 아래쪽 여백, 왼쪽 여백
외곽선: 외곽선 색상, 외곽선 스타일, 외곽선 너비
패딩: 위쪽 간격, 오른쪽 간격, 아래쪽 간격, 왼쪽 간격
일시 중지: 이후에 일시 중지, 이전에 일시 중지

공백 줄이기

CSS 스타일시트의 크기를 줄이는 또 다른 방법은 문서에서 불필요한 공백을 대부분 제거하는 것입니다. 즉, 각 규칙 위반을 한 줄의 코드에 넣으십시오. 즉, 원래 코드에 삽입된 줄바꿈과 들여쓰기를 제거하여 각 속성/속성을 별도의 줄로 분리하십시오.
예를 들어, 다음 코드 예제는 내용은 동일하지만 두 번째 코드 예제는 훨씬 더 세련되었습니다.


댓글 삭제

CSS 코드에서 주석을 제거하는 것은 파일 크기를 줄이는 또 다른 방법입니다. 주석은 코드를 읽는 데 유용하지만 브라우저가 웹 페이지를 생성하는 데는 도움이 되지 않습니다. 많은 웹 빌더는 모든 코드 줄이나 최소한 모든 규칙 문에 주석을 다는 데 익숙합니다. 대부분의 CSS 속성과 속성은 읽고 이해하기 쉽기 때문에 CSS 스타일시트에서는 이러한 관대한 주석이 거의 필요하지 않습니다. 클래스, ID 및 기타 선택기에 의미 있는 이름을 사용하면 코드를 읽기 쉽고 유지 관리하기 쉽게 유지하면서 대부분의 주석을 제거할 수 있습니다.


속기 속성을 사용하고, 불필요한 공백을 제거하고, 주석을 생략하면 CSS 스타일 시트 파일의 크기를 크게 줄일 수 있습니다. 이는 결과적으로 웹 사이트 속도 향상이라는 전반적인 목표에 작지만 잠재적으로 눈에 띄는 기여를 할 것입니다.