웹사이트 프로젝트에서 2차 개발이든 브라우저 구문 분석이든 점점 더 커지는 CSS 및 자바스크립트 파일에 직면하면 코드를 최적화해야 하지만 최적화가 단순히 파일 크기를 압축하거나 줄이는 것을 의미하지는 않습니다. 명확한 조직과 높은 운영 효율성은 우리가 원하는 결과입니다. 그렇다면 CSS 코드를 개선할 수 있는 방법은 무엇입니까? 아래에서 몇 가지 제안 사항을 살펴보겠습니다.
1.
약어를 사용하면 작업 시간이 단축되고 파일 크기가 줄어들 수 있습니다. 왜 안 됩니까?
유사한 차이점에 대해 다른 값을 설정하십시오.
일반 사본을 클립보드 인쇄로 보시겠습니까?
피 {
여백 상단: 10px;
오른쪽 여백: 20px;
여백 하단: 30px;
왼쪽 여백: 40px;
}
피 {
여백 상단: 10px;
오른쪽 여백: 20px;
여백 하단: 30px;
왼쪽 여백: 40px;
}
약어를 사용하세요:
일반 사본을 클립보드 인쇄로 보시겠습니까?
p { 여백: 10px 20px 30px 40px }
p { 여백: 10px 20px 30px 40px }
일반적으로 사용되는 글꼴의 약어를 살펴 보겠습니다.
속기 속성에 대해 자세히 알아보려면 CSS 속기 가이드(영어) 및 속기 속성이 포함된 효율적인 CSS(영어)를 확인하세요.
2. 해킹 사용을 피하세요
Jon Hick의 블로그 hicksdesign.co.uk/journal 브라우저 조건부 주석 사용
해킹은 나쁜 일입니다. 여러 브라우저에 대해 동일한 코드를 정의하므로 CSS가 번거로워집니다. 이제 우리는 해킹 대신 조건부 주석을 사용하는 방법을 알고 있으며 IE6 및 IE7에서 허용되며 IE 팀에서도 사용을 권장합니다. 조건부 주석을 사용하여 브라우저 기능과 관련된 CSS 코드를 제공합니다. 따라서 표준을 준수하는 브라우저를 제공하는 데 더 작은 핵심 CSS 코드가 사용됩니다(예: IE). !
IE6에서 조건부 주석을 사용한 코드 예제를 살펴보겠습니다.
일반 사본을 클립보드 인쇄로 보시겠습니까?
<!--[IE 6인 경우]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
<!--[IE 6인 경우]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
이 코드는 IE6이 전용 CSS 코드를 구문 분석하기 위해 추가 ie6.css를 다운로드하도록 합니다. 마찬가지로 IE7을 대상으로 하는 경우 위의 6과 7을 바꾸면 됩니다.
3. 공백을 사용하십시오.
자신의 읽기를 위한 것이든 보조 개발을 위한 것이든 CSS의 가독성을 유지해야 합니다. 공백은 중요한 역할을 합니다.
더 작은 CSS 파일을 얻기 위해 탭, 줄 바꿈, 공백 등과 같은 모든 공백 형식을 제거하는 것은 권장되지 않습니다. 중첩된 코드는 탭으로 들여쓰기하는 것이 좋으며 모든 속성은 별도의 줄에 있어야 합니다.
위와 아래의 사진을 비교하면 어떤 형식이 수정 시간을 더 절약하는 데 도움이 됩니까? 공백을 사용하면 코드를 더 쉽게 관리할 수 있습니다.
4. 중복 프레임워크 제거 및 재설정
Nathan Smith의 960 Grid System CSS 프레임워크에서 사용하는 규칙 재설정
자신이 작성한 CSS 프레임워크를 포함하여 CSS 프레임워크를 사용하기로 선택한 경우 코드를 확인하면 프레임워크에 포함된 일부 규칙이 현재 프레임워크에 적용되지 않는다는 것을 확실히 알 수 있습니다. 파일을 삭제할 수 있습니다.
재설정이라고 하면 YUI Grid CSS와 Eric Meyer의 재설정이 현재 매우 널리 사용됩니다. 재설정은 페이지가 여러 브라우저에서 일관되게 작동하도록 다양한 브라우저의 기본 스타일을 제거할 수 있습니다. 하지만 일반적으로 대규모 웹사이트에 필요한 모든 속성이 포함되어 있습니다. pre, code, sub, dfn, var 등과 같은 일부 속성은 일반 웹사이트에서는 전혀 사용되지 않습니다. Eric Meyer는 당신도 그렇게 하도록 격려할 것입니다!
프레임워크 및 재설정은 작업에 매우 도움이 되지만 필요하지 않은 용도를 제거하지 않으면 페이지의 효율성과 가독성이 저하됩니다.
5. 확장 CSS
Doug Bowman의 Stopdesign.com CSS 레이어에 특수 선택기 사용
코드를 최적화하는 또 다른 방법은 각 레이어에 대한 특정 속성을 선언하는 것입니다.
6. 작업 내용을 문서화하세요
팀 협업에서는 작성 표준, 코딩 표준, 주석 방법 및 스타일을 전달하는 것이 매우 중요합니다. 규칙은 표준에 대한 일관된 접근 방식을 기반으로 합니다. 이렇게 하면 이미 수행한 작업을 다른 사람이 복제하는 것을 방지하고 코드 확장을 방지할 수 있습니다.
7. 압축을 사용하십시오.
브라우저의 다운로드 및 로딩 시간을 절약하려면 압축이 좋은 솔루션이지만 게시할 때만 가능합니다. YUI Compressor와 CSSTidy는 이 분야의 전문가입니다. 중복된 코드를 제거하고 속성이 서로 겹칠 때 오류를 확인할 수 있습니다.
BBEdit, TextMate, TopStyle 등 널리 사용되는 많은 편집기를 사용하면 CSS 코드의 형식을 원하는 대로 지정할 수 있습니다. PHP를 사용하여 서버 압축 기술을 통해 CSS를 처리할 수도 있습니다. 더 많은 CSS 최적화 및 압축 CSS 도구를 찾을 수 있습니다.
한때 이러한 절차는 오류 발생을 최소화했지만 완벽하지는 않았습니다. 마찬가지로 CSS 핵이 포함된 파일에는 사용하지 않는 것이 가장 좋습니다. 이것이 해킹을 별도의 파일에 저장하는 또 다른 이유입니다.
마치다
------------------------------------------------- ----------------------------------
깨끗하고 최적화된 코드는 파일 크기뿐만 아니라 유지보수성과 유용성. 위의 원칙은 CSS에만 적용되는 것이 아니라 HTML, Javascript 및 기타 프로그래밍 언어에도 적용될 수 있습니다. CSS 파일은 웹사이트의 최종 사용자에게만 표시하기 위한 것이 아닙니다. 위의 원칙은 개발자 경험뿐만 아니라 사용자 경험에도 도움이 될 수 있습니다. 이러한 원칙을 향후 프로젝트에 적용하면 반드시 중요한 결과를 얻을 수 있습니다.