CSS 구조: 코드 간결 원칙

CSS 구조: 코드 간결 원칙
저자: 사막 날짜: 2013 - 04 - 25 클릭: 508

 
특별 성명: 이 글 은 Jekst 가 Denise Jacobs 의 영문 글 의 원래 이름 인 에 따라 번역 한 것 으로 전체 번역문 은 우리 자신의 이해 와 사상 을 가지 고 있 으 며 번역 이 잘 되 지 않 거나 잘못된 점 이 있 으 면 동행 친구 에 게 지적 해 주 십시오.이 번역문 을 전재 하려 면 영문 출처 를 밝 혀 야 합 니 다.http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2/저자
- 저자: 데 니스 제 이 콥 스
- 번역자: Jekst
많은 경우 에 큰 (작은) 사이트 의 CSS 는 코드 가 비대 하고 불필요 한 교재 예 이다. 대부분 코드 는 불필요 한 한정 문자 요 소 를 과장 되 게 사 용 했 고 불필요 한 긴 선택 기 에서 특정한 선택 기 를 지나치게 사 용 했 으 며 더욱 적합 한 선택 기 가 있 을 때 의존 적 인 후대 선택 기 를 사용 했다. 그리고 불필요 하 다.어 울 리 지 않 는 곳 에서 사 용 했 습 니 다!important。우 리 는 기본 적 이 고 신뢰 할 수 있 는 CSS 작성 법 을 배우 고 실천 을 통 해 조직 스타일 시트 의 유지 가능성 을 크게 향상 시 킬 수 있다.우리 의 최종 목 표 는 사이트 에 스타일 시트 를 조직 하여 확장 성 을 크게 향상 시 키 는 것 이다.
그래서 우리 의 방법 은 두 부분 을 포함한다.우선, 우 리 는 깔끔 하고 효율 적 인 CSS 를 작성 하기 위해 기본 적 인 실천 을 제공 해 야 한다.그 다음 에 우 리 는 날로 유행 하 는 확장 가능 한 CSS 구조의 주요 방법 을 이해 하고 배 워 서 우리 사이트 의 스타일 을 새로운 차원 으로 표현 해 야 한다.
제 가 탐색 한 이 내용 들 은 본문 과 다음 글 을 관통 시 킬 것 입 니 다. 그러나 확장 가능 한 코드 를 작성 하기 전에 먼저 CSS 청 소 를 하고 제 가 가장 좋아 하 는 기술 로 시작 하 겠 습 니 다.
유용 한 기교 들
다른 개발 자 들 에 게 서 업무 기 교 를 배 우 는 것 은 항상 많은 이익 을 얻 을 수 있다.다음은 제 가 개인 적 으로 가장 좋아 하 는 기교 입 니 다.
포 지 셔 닝 스타일
페이지 에서 요 소 를 찾 는 방법 을 사용 하 는 스타일 은 좋 은 생각 입 니 다.IE 개발 자 도구, 화 호의 Firebug 나 구 글 의 개발 자 도구 등 도 구 를 사용 하지 않 는 다 면 아 틀 라인 속성 을 추가 하 는 구식 방법 을 사용 할 수 있 습 니 다. 아 틀 라인 속성 을 추가 하면 그 요 소 를 보고 싶 은 스타일 을 빨리 볼 수 있 습 니 다.

.searchform > .searchsubmit {
  width: 14%;
  height: 25px;
  background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
  outline: 1px solid red;/*       */
}	

아 틀 라인 속성 을 사용 하 는 기본 원 리 는 아 틀 라인 속성 은 요소 의 크기 를 증가 시 키 지 않 지만 border 는 증가 합 니 다.빨간색 (또는 다른 색상 이름) 을 사용 한 아 울 렛 은 의미 가 있 습 니 다.코드 를 작성 할 때 16 진수, rgb (a), hsl (a) 형식의 코드 만 사용 하고 색상 이름 은 사용 하지 않 습 니 다.그래서 한 색상 의 이름 을 보 았 을 때 이 속성 이 문 제 를 해결 하기 위해 추 가 된 것 임 을 알 수 있 습 니 다.outline 속성 이 IE8 이하 에 서 는 지원 되 지 않 습 니 다.
테스트 스타일 추가
테스트 와 문 제 를 해결 하 는 과정 에서 또 다른 좋 은 방법 은 새로 추 가 된 테스트 스타일 을 들 여 쓰 는 것 이다.

.searchform > .searchsubmit {
  width: 14%;
  height: 25px;
  background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
    margin: -2px 0 0 0;/*       */
}	

들 여 쓰기 를 사용 하면 이 스타일 이 일시 적 이 고 나중에 쉽게 찾 을 수 있 습 니 다.그 스타일 을 유지 해 야 한다 고 결정 할 때 이 스타일 의 들 여 쓰기 양 을 다른 스타일 의 들 여 쓰기 양 으로 조정 합 니 다.
스타일 사용 안 함
좋 은 방법 으로 새로운 스타일 을 추가 하 는 동시에 빠 른 방법 으로 사용 하지 않 아야 합 니 다."x -" 를 선택 기 나 스타일 규칙 앞 에 놓 으 면 이 스타일 들 을 빠르게 제거 할 수 있 습 니 다.

.social a {
  -moz-transition: opacity 0.3s ease 0s;
  x-display: block;/*    */
  height: 35px;
  opacity: 0.4;
}	

이 방법 은 주석 스타일 보다 훨씬 빠 릅 니 다. 나중에 이 스타일 을 유지 하기 로 결정 하면 쉽게 찾 아 볼 수 있 습 니 다. 이 스타일 을 적당 한 위치 에 두 십시오.
CSS 코드 정리 최적화 준칙
예 사 롭 지 않 은 기 교 를 배 웠 으 니 깔끔 하고 코드 를 최적화 하거나 다른 사람의 스파게티 식 CSS 코드 를 정리 하기 위해 경험 법칙 을 살 펴 보 자.우 리 는 거시적인 차원 에서 미시적 인 차원 까지 먼저 HTML 코드 의 가 독성 과 의 미 를 어떻게 향상 시 키 는 지 탐색 한 다음 에 더 좋 은 조직 문서 로 이전 하고 스타일 성명 수량 을 줄 이 는 방법 을 모색 해 야 한다.
거시적 차원 의 최적화
스타일 설명 자 체 를 주목 하 는 것 은 쉽 지만 선택 기 를 만 들 기 전에 HTML 과 스타일 시트 자체 가 좋 은 가 독성 을 가 져 야 합 니 다.
스타일 시트 정보 및 구조 설명 제공
비교적 큰 스타일 시트 파일 에서 나 는 디 렉 터 리 를 매우 좋아한다.개발 자 에 게 새로운 스타일 시트 를 받 으 면 각 부분 이 무엇 을 하 는 지, 어떤 이름 이 원 하 는 스타일 로 바로 이동 할 수 있 는 지 알 수 있 습 니 다.
가장 기본 적 인 것 은 스타일 파일 에 개발 자의 정보 (이름 등), 마지막 업데이트 날 짜 를 쓰 는 것 을 권장 합 니 다.이 방법 을 사용 하면 파일 에 문제 가 있 으 면 현재 개발 자 는 누 구 를 찾 아가 물 어 볼 지 알 고 있 습 니 다.

/* stylesheet information for XyZ Corp
File created date: 09.15.2010
Last modified date: 06.04.2012
By: [name]
*/	

또한 저 는 여러분 에 게 파일 의 시작 부분 에 디 렉 터 리 를 쓰 는 것 을 권장 합 니 다. 그러면 다른 개발 자 들 이 이 디 렉 터 리 를 보면 이 파일 의 구조, 다른 부분의 역할 을 알 게 될 것 입 니 다.

/* Table of Contents
- Link Styles
- Other sitewide styles
- Actions
- Layout
- LOGO
- TOP NAV
- NAVBAR
- SUBNAV
*/
…
(later in the document…)
/* =Layout */ (etc.)	

스타일 시트 파일 의 모든 부분 이름 앞 에 등호 (=) 를 붙 이 는 것 은 특별히 이렇게 하 는 것 입 니 다. 표지 로 서 문 서 를 검색 하 는 것 이 더 쉬 운 방법 입 니 다.
주석 과 끼 워 넣 기
주석 과 끼 워 넣 기 표 시 는 끼 워 넣 은 요소 의 시작 과 끝 을 추적 하여 끼 워 넣 은 요소 의 코드 블록 을 더욱 빨리 식별 하 는 데 도움 이 된다.
div 또는 다른 주요 레이아웃 요 소 를 설명 할 때 사용 하거나 시작 하거나 끝 을 표시 합 니 다.
끼 워 넣 는 것 은 필요 한 절차 가 아 닌 것 처럼 보일 수 있 지만 시각 적 측면 에서 매우 유용 하 다. 시각 적 차원 을 명확 하 게 나타 내 고 문 제 를 쉽게 발견 할 수 있다. 예 를 들 어 줄 안의 요 소 는 블록 급 요 소 를 포함 하고 정확 하지 않 은 닫 거나 요소 라벨 을 다시 쓰 는 등 문 제 를 포함 하 는데 이런 문 제 는 구조 상의 큰 문 제 를 일 으 킬 수 있다.그러나 검 사 는 보통 간단 한 문 제 를 발견 하 는 데 도움 이 되 지 않 는 다.
너 는 아래 의 예 가 다른 것 을 볼 수 있다.
이전 코드

<body>
<div id="pagewrap">
<div id="header">
<h1>Website Titleh1>
<ul id="navigation">
<li><a href="#">Homea>li>
<li><a href="#">Abouta>li>
<li><a href="#">Contacta>li>
ul>
<div id="contentwrap">
<div id="maincontent">
<h2>Main Content Titleh2>
<p>Main content, which is so much more
important than the secondary content that it
makes one teary with emotion.p>
div>
<div id="secondarycontent">
<h3>Sidebar Titleh3>
<p>Sidebar content, which is not as important
as the primary content (which is why it is in
the sidebar)p>
div>
<div id="footer">
<p>standard copyright and footer
informationp>
div>
body>	

수 정 된 코드:

<body>
<div id="pagewrap">
  <div id="header">
    <h1>Website Titleh1>
    <ul id="navigation">
    <li><a href="#">Homea>li>
    <li><a href="#">Abouta>li>
    <li><a href="#">Contacta>li>
    ul>
  <div>
  
  <div id="contentwrap">
    <div id="maincontent">
    <h2>Main Content Titleh2>
    <p>Main content, which is so much more
important than the secondary content that it
makes one teary with emotion.p>
    div>
 
    <div id="secondarycontent">
    <h3>Sidebar Titleh3>
    <p>Sidebar content, which is not as important
as the primary content (which is why it is in
the sidebar)p>
    div>
  div>
  <div id="footer">
    <p>standard copyright and footer
informationp>
  div>
div>
body>	

스타일 시트 를 구성 하 는 더 많은 정보 와 기 교 를 찾 을 수 있 습 니 다. Creating Effective Semantic Markup
미시적 차원 최적화
미시적 최 적 화 는 파일 크기 를 줄 이 고 페이지 로드 속 도 를 높이 며 최고의 체험 을 얻 기 위 한 것 이다.아래 의 이런 방법 들 은 거시적인 차원 에서 당신 의 CSS 를 향상 시 킬 수 있 습 니 다.
알파벳 순 으로 스타일 규칙 을 작성 하 다.
알파벳 순 으로 CSS 규칙 을 배열 하 는 것 은 코드 를 깨끗하게 유지 하고 문 제 를 줄 이 는 중요 한 경로 이다.왜 일 까요?알파벳 순 으로 배 열 된 스타일 은 포 지 셔 닝 이 쉽 기 때문이다.
예시 1:

.login {
  margin-top: 5px;
  line-height: 1.5em;
  padding-left: 5px;
  float: right;
  list-style-type: none;
  width: 80px;
  font-weight: bold;
  border-left: 1px solid #69824d;
} 	

예시 2

.login {
  border-left: 1px solid #69824d;
  float: right;
  font-weight: bold;
  line-height: 1.5em;
  list-style-type: none;
  margin-top: 5px;
  padding-left: 5px;
  width: 80px;
}	

속 도 를 높이 기 위해 효율 을 높이다.
긴 선택 기 는 브 라 우 저 검색 페이지 DOM 에서 불필요 한 요 소 를 일치 시 킵 니 다.요소 한정 부 를 제외 하고 후대 선택 기 를 사용 하지 않 는 것 이 더욱 직접적인 일치 스타일 에 유리 하고 속 도 를 높 일 수 있 습 니 다.
최적화 전:

div#wrapper div#maincontent div#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}	

최적화 후:

#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}	

이 화제 에 관 한 더 많은 내용 은 이 글 을 볼 수 있다. 'Optimizations for Improving Page Load Times'
코드 간결 유지
스타일 성명 과 선택 기 를 언급 할 때 적 을 수록 효율 이 높다.스타일 설명 에 대해 서 는 다음 규칙 을 사용 할 수 있 습 니 다.
어떠한 경우 에 도 약자 속성 을 사용 합 니 다 (약자 사용 시 약자 속성의 문법, 속성 값 의 순서, 기본 속성 값 과 필요 한 속성 값) 압축 값 과 단위 어떠한 경우 에 도 중복 되 는 속성 을 쓰 는 것 을 피해 야 한다 수정 전 코드:

#sidebar {
  background-color: #fff;
  background-image: (bg.png);
  background-position: 0 0;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-color: #ffff00;
  font-family: Georgia, serif;
  font-size: 1.33em;
  line-height: 1.33em;
  font-weight: normal;
  margin: 10px 20px 10px 20px;
  padding: .1em;
}	

수정 후 코드

#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}	

압축 코드
마지막 으로 여러 줄 과 들 여 쓰기 를 삭제 하 는 것 도 사이트 의 효율 과 속 도 를 높이 는 데 도움 이 된다.개발 할 때 는 여러 줄, 끼 워 넣 기, 들 여 쓰 기 를 추천 하지만 사이트 가 접속 을 준비 하려 면 CSS 파일 크기 를 줄 이 는 것 이 가장 좋다.일부 압축 CSS 가 비교적 좋 은 도 구 는 CSS Compressor 와 CSS Drive。
공 구 는 매우 큰 작용 을 가지 고 있다.
인 코딩 을 할 때 이 규칙 들 을 숙지 하면 실 수 를 피 하 는 데 도움 이 될 것 입 니 다. 이런 실 수 는 앞으로 많은 시간 을 들 여 실망 시 킬 수 있 습 니 다.하지만 당신 이 이 모든 것 을 스스로 해 야 한다 고 생각 하지 마 세 요. 좋 은 도구 들 이 코드 를 정리 하 는 데 도움 을 줄 수 있 습 니 다.나 는 CleanCSS 와 Code Beautifier 가 좋 은 도구 라 고 생각한다.내 가 설명 한 방법 을 통합 하 는 것 을 배 우 는 동시에 심지어 이 도 구 를 사용 하여 당신 의 코드 를 정리 할 수 있 습 니 다.
번역자 수화: 전체 번역 은 원문의 노선 에 따라 진행 되 고 번역 과정 에서 개인 이 기술 에 대한 이 해 를 약간 더 했다.번역 에 잘못된 점 이 있 으 면 동행 친구 에 게 조언 을 부탁 합 니 다.감사합니다!
Jekst 에 대하 여
자주 사용 되 는 닉네임 jekst 는 현재 베 이 징 의 한 정보 기술 회사 에 근무 하고 있 으 며 주로 종사 하고 있 습 니 다.net 시리즈 의 개발 은 전단 을 사랑 하고 css, jQuery 에 관심 이 많 으 며 기술 교류 활동 에 참가 하 는 것 을 좋아 합 니 다.교류 와 격려 를 환영 합 니 다: 시 나 웨 이 보.