원본 텍스트: 더 작고 최적화된 CSS 파일을 위한 9가지 팁
저자|저자: Stefan Vervoort
번역|번역: Luc
CSS 파일은 웹 페이지 헤드에 로드되므로 각 방문자는 이 파일을 다운로드합니다. 우리는 PHP 파일과 이미지를 최적화하지만 CSS 파일은 종종 무시합니다. 오늘 우리는 이 문제에 대해 생각하고 그것에 대해 뭔가를 해야 합니다.
CSS 옵티마이저를 사용하여 CSS를 최적화하는 것은 가능하지만, 아래에 언급된 기술을 사용하여 코드를 작성하면 효율성과 성능 모두 향상될 것이라고 생각합니다.
CSS 파일을 최적화하면 트래픽을 절약하고 페이지 로딩 속도를 높일 수도 있습니다.
1. 주석 주석은 CSS를 작성할 때 함께 작업하는 동료가 코드의 의미를 이해할 수 있도록 특히 유용합니다. 주석을 추가하는 방법에는 여러 가지가 있습니다. 다음 방법을 사용할 수 있습니다.
/*------*/
/*-----논평-------*/
/*------*/
다음 방법을 사용할 수도 있습니다.
/*논평*/
이렇게 하면 20자가 절약되고, 댓글이 15개 있다고 가정하면 300자가 절약됩니다.
2. 약식 색상 코드 색상 코드는 HEX 코드로 정의되며 6자를 포함하지만 경우에 따라 3자를 대신 사용할 수도 있습니다. 다음 예를 살펴보십시오.
div{ color: #ffffff; } /* 단축코드: color:#fff;
div{ color: #ff88ff; } /* 단축코드: color:#f8f;
div{ color: #f8f7f2; } /* 단축 코드 사용 불가 */
3. 요소를 병합합니다. 예를 들어 h2, h3, h4와 같은 요소가 여러 개 있고 모두 동일한 속성을 갖고 일부 속성만 다른 경우 다음과 같이 작성할 수 있습니다.
h2, h3, h4 {
패딩:0;
여백:0;
색상:#333;
문자 간격:.05em;
단어 간격:0.1em;
}
h2{ 글꼴 크기:1.2em }
h3{ 글꼴 크기:1.1em }
h4{ 글꼴 크기:1em }
이는 서로 다른 글꼴 크기 속성을 선언하면서 동일한 속성을 가진 요소를 병합합니다. 많은 공간을 절약할 수 있습니다.
4. 값이 0일 경우 Out Px/Em/%는 생략됩니다.
0에는 Px, Em 및 백분율 기호가 필요하지 않습니다. 값이 0(사용할 것으로 가정)인 경우 단위를 생략하면 두 배의 문자가 저장됩니다.
div{ 패딩: 0px 5px 5px 10px }
/* 약어: 패딩: 0 5px 5px 10px */
5. 속성 병합. 패딩, 여백, 테두리 등 일부 속성은 별도로 작성할 수 있습니다. 예: 위쪽 패딩, 오른쪽 패딩, 아래쪽 패딩, 왼쪽 패딩.
가능하다면 작성하기 쉽고 공간을 절약할 수 있도록 결합하세요.
div{
왼쪽 패딩:0 ;
패딩 상단:50px;
패딩 하단:23px;
패딩 오른쪽:4px }
/* 약어: padding:50px 4px 23px 0;
상한값과 하한값이 같고, 왼쪽값과 오른쪽값이 같다면 다음과 같이 쓸 수 있습니다:
div{
패딩 상단:5px;
패딩 하단:5px;
왼쪽 패딩:0 ;
패딩 오른쪽:0px }
/* 약어: padding:5px 0 */
6. 클래스/ID를 현명하게 선택하세요
선택한 클래스 및 ID 이름은 최대한 짧고 이해하기 쉽고 의미가 있어야 합니다.
"HeaderMiddleLeftCategories"와 같은 이름을 선택하지 말고 대신 "h-cats"를 사용하세요. 이렇게 하면 많은 문자가 절약됩니다.
7. CSS 파일을 정리하여 공간을 절약하세요. CSS를 사용하여 웹 사이트를 구축할 때 작성된 코드가 작동할 수도 있고 작동하지 않을 수도 있으며 많은 공간을 차지합니다. 공간을 절약하려면 CSS 파일 전체에서 오류와 잘못된 코드가 있는지 확인해야 합니다.
8. 선택기의 마지막 속성에서 세미콜론을 제거합니다. 이는 CSS 압축기를 사용하여 발견한 방법입니다.
몸{
배경:#ccc;
색상:#333;
/* 단축 코드: color:#333 */보세요, 마지막 세미콜론을 제거했습니다. 효과는 분명하지 않을 수 있지만 약간만 더하면 50개의 선택기가 50자가 됩니다.
9. 불필요한 공백과 캐리지 리턴 삭제 공백과 캐리지 리턴은 한 문자를 차지하므로 모두 삭제하는 것이 좋습니다. 그러나 문제는 CSS의 구조를 파괴하고 가독성을 떨어뜨린다는 것입니다.
저는 CSS 파일을 최적화할 때 일반적으로 이 작업을 수행하지 않습니다. 왜냐하면 구조가 나에게 더 중요하기 때문입니다. 여기에 절충안이 있습니다. 캐리지 리턴과 공백이 포함되지 않은 웹 사이트의 파일을 사용하십시오. 캐리지 리턴과 공백이 포함된 파일을 로컬로 저장하면 편집이 매우 편리해집니다.
결론 CSS 파일을 완벽하게 최적화하려면 CSS 압축기를 사용하는 것이 좋습니다. 그러면 위의 기술을 스스로 익히고 CSS 코드의 작성 속도와 품질을 향상시킬 수 있습니다.
다른 팁이 있으면 메시지를 남겨주세요.