5 가지 방법 으로 더 좋 은 CSS 코드 를 즉시 작성 합 니 다.

원본 링크:http://article.yeeyan.org/view/toydime/30047?from_com
물론 모든 사람 이 CSS 코드 를 작성 할 수 있 습 니 다. 심지어 지금 은 프로젝트 를 위해 일 하 게 되 었 습 니 다.근 데 CSS 가 더 좋 을 까?이 다섯 개의 Tips 로 CSS 를 개선 하 세 요!
1. 초기 화
우선, 어떤 분 류 를 리 셋 해 야 한 다 는 것 을 진지 하 게 알려 드 립 니 다.네가 사용 하 든 Eric Meyer Reset、YUI Reset
혹은 당신 이 직접 만 든 리 셋 코드 는 사용 하기 만 하면 됩 니 다.
모든 요소 의 채 움 (padding) 과 여백 (margin) 을 간단하게 제거 할 수 있 습 니 다.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, 

pre, form, fieldset, table, th, td { margin: 0; padding: 0; }  

Eric Meyer Reset 과 YUI Reset 은 매우 강력 합 니 다. 하지만 저 에 게 는 너무 멀리 떨어져 있 습 니 다. 모든 것 을 리 셋 하고 모든 요소 의 속성 을 다시 정의 해 야 한다 고 생각 합 니 다. 이것 이 바로 Eric Meyer 가 더 효과 적 인 사용 (스타일 시트 리 셋) 을 추천 하 는 이유 입 니 다. 리 셋 스타일 시트 만 사용 하지 말고 프로젝트 에 끌 어 다 놓 으 십시오.(스타일 시트 리 셋) 자신 만 의 리 셋 스타일 시트 를 만 듭 니 다.
오, 사용 을 중지 하 세 요:
   * { margin: 0; padding: 0; } 
더 많은 시간 을 들 여 그것 을 만 듭 니 다. 채 우기 (padding) 를 제거 하면 체크 버튼 이 어떻게 변 할 것 같 습 니까? 폼 요 소 는 때때로 유행 하 는 일 을 할 수 있 기 때문에 가장 효과 적 인 방법 은 그들 을 독립 시 키 는 것 입 니 다.
2. 정렬
작은 테스트
이 예 는 오른쪽 거리 속성 을 어떻게 빨리 찾 을 수 있 는 지 생각 하 게 하 는 것 입 니까?
Example#1
div#header h1 {      z-index: 101;      color: #000;      position: relative;      line-height: 24px;      margin-right: 48px;      border-bottom: 1px solid #dedede;      font-size: 18px;  } 
Example#2

div#header h1 {
	border-bottom: 1px solid #dedede;
	color: #000;
	font-size: 18px;
	line-height: 24px;
	margin-right: 48px;
	position: relative;
	z-index: 101;
}

Example \ # 2 는 오른쪽 거리 속성 을 빨리 찾 을 수 없습니다. 알파벳 에 따라 요소 속성 을 정렬 합 니 다. 일치 하 게 CSS 를 만 들 면 특수 속성 을 찾 는 데 걸 리 는 시간 을 절약 할 수 있 습 니 다.
나 는 일부 사람들 이 이러한 방법 으로 코드 를 조직 하고, 다른 사람들 은 또 다른 방법 으로 조직 하 는 것 을 알 고 있다. 그러나 우리 회사 에서 우 리 는 협상 하여 결정 을 내 렸 다. 모든 코드 는 알파벳 순 으로 조직 될 것 이다. 이러한 조직 코드 를 통 해 다른 사람과 협동 하여 일 하 는 것 은 반드시 도움 이 될 것 이다. 속성 이 알파벳 순 으로 정렬 되 지 않 은 레이 어드 스타일 시트 를 만 났 을 때 나 는 매번움 츠 러 들 거 야.
3. 조직
당신 은 당신 의 스타일 시트 를 조직 하여 관련 내용 을 한데 모 아 원 하 는 것 을 쉽게 찾 아야 합 니 다. 더욱 효과 적 인 주 해 를 사용 하 십시오. 예 를 들 어 이것 은 제 가 어떻게 나의 레이 어드 스타일 시트 를 구성 하 는 지 입 니 다.

/*****Reset*****/
       （padding）   （margin）。

/*****Basic Elements*****/
         : body, h1-h6, ul, ol, a, p,  .

/*****Generic Classes*****/
       ，        ,         ,  
  ，                 ,               。

/*****Basic Layout*****/
       : header, footer .              

/*****Header*****/
    Hearder  

/*****Content*****/
           

/*****Footer*****/
    Footer   
/*****Etc*****/
        。

비슷 한 요 소 를 주석 하고 분류 하 는 그룹 을 통 해 원 하 는 것 을 더 빨리 찾 을 수 있 습 니 다.
4. 일치 성
어떤 방식 으로 코드 를 작성 할 지 결정 하 더 라 도 일치 합 니 다. 1 줄 VS 여러 줄 에 놓 여 있 는 CSS 의 작성 방식 에 대한 논쟁 은 지루 하고 피곤 합 니 다. 논쟁 할 필요 가 없습니다. 모든 사람 이 자신의 견 해 를 가지 고 있 기 때문에 원 하 는 작업 방식 을 선택 하고 모든 스타일 시트 에서 일치 합 니 다.
개인 적 으로 두 가 지 를 결합 하 는 방식 을 사용 하 겠 습 니 다. 선택 기 가 세 개의 속성 을 초과 하면 여러 줄 로 작 성 됩 니 다.
div#header { float: left; width: 100%; }  div#header div.column {      border-right: 1px solid #ccc;      float: rightright;      margin-right: 50px;      padding: 10px;      width: 300px;  }  div#header h1 { float: left; position: relative; width: 250px; }  
그 러 니까 니 가 좋아 하 는 방식 을 찾 아서 일치 해.
 
5. 정확 한 곳 부터
태그 언어 가 완성 되 기 전에 스타일 시트 에 접근 하려 고 하지 마 세 요.
웹 페이지 를 분할 하려 고 할 때 CSS 파일 을 만 들 기 전에 body 탭 에서 body 탭 사이 의 닫 힌 탭 사이 의 모든 문 서 를 미리 보고 표시 해 야 합 니 다. DIV, ID, 클래스 선택 기 를 추가 하지 않 습 니 다. 일반적인 DIV 를 추가 하 겠 습 니 다. 마치 hearder, content, footer 와 같 습 니 다. 현실 적 인 존재 라 는 것 을 알 고 있 기 때 문 입 니 다.
문 서 를 먼저 표시 하면 정 해진 divities 1 과 classitis 2 번 거 로 움 을 만 나 지 않 습 니 다! / * You only need to add in that stuff once you have begin to write the CSS and realize that you are going to need another hook to achiesh what you are trying to achieve. * / (원문 미 번역).
CSS 하위 선택 기 를 이용 하여 하위 요 소 를 지정 합 니 다. 기계 적 으로 요소 에 클래스 나 ID 선택 기 를 추가 하지 마 십시오. 좋 은 포맷 문서 (또는 태그 구조) 가 없 는 CSS 는 가치 가 없습니다.
총결산
이 Tips 들 은 CSS 코드 의 작성 을 더 잘 완성 하 는 데 도움 을 줄 수 있 습 니 다. 하지만 이 목록 의 끝 을 의미 하 는 것 은 아 닙 니 다. 다음 에 다른 것 을 가 져 와 서 여러분 과 공유 하 겠 습 니 다.
당신 은 우리 가 CSS 코드 를 보완 하 는 데 더 좋 은 Tips 가 있 습 니까?