CSS 축소: 팁 및 도구

깨끗하고 최적화된 CSS를 작성하는 방법을 배우려면 많은 연습이 필요하며, 정리하려는 무의식적이고 강박적인 욕구가 필요합니다. CSS를 깔끔하게 유지하는 것은 단지 깨끗해야 한다는 미친 심리적 욕구에 관한 것이 아닙니다. 특히 대규모 사이트의 경우 페이지 로드 속도가 빨라집니다. 로드 시간이 빨라지면 유용성이 향상되고 사용자 만족도가 높아집니다.

많은 사람들이 코드 히스테리를 가지고 있습니다. 이것은 나쁜 것이 아닙니다.

이 문서에서는 CSS를 최적화하는 데 사용할 수 있는 기술과 코드를 자동으로 압축할 수 있는 일부 온라인 및 데스크톱 압축 도구를 소개합니다.

압축하거나 압축하지 않으려면

CSS를 압축하는 방법을 논의하기 전에 압축과 코드 가독성 사이에 균형이 유지되는 경우가 많다는 점에 유의하는 것이 중요합니다. 많은 코더는 CSS의 깔끔한 구성에 자부심을 갖고 있으며 주석과 줄바꿈을 제거하기 위해 코드가 압축기를 통해 실행되는 것을 원하지 않습니다. 디자이너로서 당신은 당신이 작성한 코드의 목표를 분석해야 합니다. CSS 몇 줄만 필요한 소규모 웹사이트를 만드는 경우 추가 압축이 필요하지 않을 수도 있습니다. 마찬가지로, 공개 팀과 공유해야 하는 코드를 작성하는 경우 추가 주석과 줄 바꿈을 삽입하면 동료의 시간을 많이 절약하고 진심으로 감사를 표할 수 있습니다. 그러나 CSS가 많이 필요한 대형 웹사이트를 디자인하는 경우 파일 크기에 주의를 기울여 가능한 한 작게 유지하는 것이 좋습니다.

압축과 가능성 사이의 완벽한 조합을 찾는 데 시간이 걸릴 수 있지만 두 가지 모두 탐색할 가치가 있으며 둘 사이의 균형을 달성하면 작업이 훨씬 쉬워질 수 있습니다. 동시에, 압축이 반드시 가독성을 감소시키는 것은 아니라는 점은 분명합니다. 코드를 압축하여 더 좋고 체계적인 코드를 만드는 데 사용할 수 있는 기술이 많이 있습니다.

이를 염두에 두고 CSS 파일을 최소화하는 몇 가지 기술을 살펴보는 것부터 시작하겠습니다.

빈 스타일 정의

분명한 것부터 시작해보자. 빈 스타일이 있으면 폐기하세요. 나중에 필요할 수도 있고 지저분하다는 것을 알고 변명하지 마십시오. 타당한 이유가 없으면 추가하지 마세요.

약어

CSS 약어는 여러 줄의 CSS를 한 줄로 결합하는 방법입니다. 당신이 알고 있는 모든 약어 기술을 사용하는 습관을 들이면 작성하게 되는 코드 줄 수를 크게 줄일 수 있습니다. 예는 다음과 같습니다.

긴 버전:

 #컨테이너 {
    패딩탑 : 5px
    패딩 오른쪽 : 10px
    패딩 하단 : 30px
    패딩 왼쪽 : 18px
}

단축 버전:

 #컨테이너 {
    패딩 : 5px 10px 30px 18px ;
}

CSS 약어에 대해 자세히 알아보려면 다음 문서를 방문하세요.

CSS 스프라이트

CSS 스프라이트의 원래 아이디어는 HTTP 요청 수를 줄여 페이지 로드 시간을 단축하는 것이었습니다. Sprite가 이 목표를 달성하는 방법은 여러 이미지를 단일 이미지 파일(일반적으로 격자 형식 이미지)로 결합하는 것입니다. 각 개별 이미지는 더 큰 스프라이트 이미지의 배경 위치를 전환하여 표시됩니다. CSS 코드의 경우 스프라이트 기술을 사용하면 코드의 재사용성과 유지 관리성이 크게 향상되어 CSS 코드의 양이 크게 줄어듭니다.

CSS Sprite에 대해 자세히 알아보려면 CSS-Tricks에 대한 Chris Coyier의 튜토리얼을 확인하세요.

물론 Front-End Observation에는 CSS Sprites에 대한 유용한 기사와 팁 도 있습니다.

댓글 줄이기

나는 내 코드에 주석을 사용하는 것을 좋아합니다. 주석을 많이 추가할수록 코드의 다양한 부분을 시각적으로 더 빠르게 탐색할 수 있습니다. 그러나 리소스를 거의 사용하지 않고 고도로 최적화된 CSS가 필요한 경우 과도한 주석은 귀중한 바이트를 소모하게 됩니다. 따라서 불필요한 주석을 모두 제거하고 가능한 한 적은 바이트로 유지해야 하는 주석의 형식을 다시 지정하십시오.

합리적인 글꼴 유형(font-Family)

파일 크기가 큰 문제인 경우 글꼴 계열에 대체 글꼴을 포함하지 마세요. 불필요한 수하물을 없애고 추가 옵션을 한두 가지로 줄이세요.

전에:

 #container { 글꼴 계열 :Palatino , Georgia , Times , serif }

후에:

 #컨테이너 { 글꼴 계열 : Palatino , serif }

글꼴에 관해서는 Yu Bo가 쓴 " 웹 기본 글꼴에 관한 세 가지 이야기 "를 읽어볼 것을 적극 권장합니다. 기사에 언급된 여러 기사도 읽고 생각해 볼 가치가 있습니다.

16진수 색상 사용

바이트 수를 줄이기 위해 모든 RGB 색상 값은 해당하는 16진수 값으로 변환됩니다. 처음에는 큰 의미가 없을 수도 있지만 어떤 바이트라도 그만한 가치가 있습니다!

전에:

 # 컨테이너 { 색상 : rgb ( 131 , 100 , 219 ) }

후에:

 # 컨테이너 { 색상 : #8364DB }

줄 바꿈 제거

각 스타일 속성을 살펴보고 필요하지 않은 하드 리턴을 제거하세요. 마지막 세미콜론을 제거할 수도 있습니다.

전에:

 #컨테이너 {
    여백 : 5px ;
    패딩 : 5px 10px 30px 18px ;
}

후에:

 #container { 여백 : 5px ; 패딩 : 5px 10px 30px 18px }