6가지 CSS 습관 공유(CSS 경험치)

1,class 로name 방식으로 클래스 이름을 씁니다.예전에는 클라스-name로 쓰는 것을 좋아했지만, 두 가지도 별 차이가 없는 것 같다.그러나 나는 브라우저의 대소문자에 민감한 문제에 대해 항상 의심하는 태도를 가지고 있기 때문에,className으로 클래스 이름을 쓰는 것을 비교적 반대한다.하지만 아이디는 낙타봉식으로 쓸 거예요. 이유는 다음 참조.2. 스타일은 모두class를 사용하고 id를 사용하지 않습니다.세 가지 이유가 있습니다. 하나, id는 중복될 수 없기 때문에class를 사용하면 거리낌 없이 수차례 사용할 수 있습니다.둘째, id의 우선 순위가 너무 높습니다. #pagecontent a {color:#f60}, 그럼 너는 끝장이야. 안에 링크 색깔을 바꾸려면 #page 를 넣어야 해.콘텐츠가 이 우선순위를 넘을 수 있습니다.셋째, id는 JS에 전문적으로 남겨야 표현과 행위의 분리 원칙에 부합된다.그래서 id는 제가 낙타봉식을 사용하는 것도 이 점을 나타내기 위해서입니다.3. Margin과padding은 마지막 값을 최대한 생략합니다.예를 들어margin: 20px 10px 5px 10px;좌우값이 같으면 마지막 값을 생략하고margin:20px10px5px로 써야 한다.이렇게 하면 때가 되면 좌우 간격을 바꾸어야 하니, 빠뜨리지 않도록 바꾸면 된다.사실 이 문제는 매우 작지만 Margin 네 개의 값 생략 규칙에 대한 숙련도를 알 수 있다.4. 표준에 따라 CSS를 쓰고 특정 브라우저에 대해hack을 한다.예를 들어 우리는 보통 다음과 같은 문법을 만날 수 있다.
Css 코드

.side_col {   

        float:left;   

        display: inline;   

        margin-left: 20px;   

    }  

.side_col {
	    float:left;
	    display: inline;
	    margin-left: 20px;
	}

나의 작법은 다음과 같다.
 
Css 코드

.side_col {   

        float: left;   

        margin-left: 20px;   

    }   

    *   .side_col {   

        _display:inline;  /*hacked for IE 6*/  

    }  

.side_col {
	    float: left;
	    margin-left: 20px;
	}
	*   .side_col {
	    _display:inline;  /*hacked for IE 6*/
	}

잘 보이시나요?hack을 한데 섞어서도 안 되고 요행으로 해서는 안 된다. 플로트:left와 디스플레이:inline을 함께 써도 괜찮다고 생각해서는 안 된다.응, 그들 둘은 확실히 괜찮지만, 다른 hack은 꼭 그렇지는 않아.그리고 디스플레이: inline은 순전히 IE6의 버그를 해결하기 위한 것이기 때문에 앞에 밑줄을 쳐서 당신의 목적을 명확하게 표현하세요.그리고 모든 hack이 IE를 위한 것이라고 생각하지 마세요.사실 어떤 hack들은 다른 브라우저, 예를 들어 FF를 겨냥한 것이다.이것은 CSS 표준에 대한 숙련을 요구하고 어떤 과장이 표준을 준수하고 어떤 것이 표준을 위반하는지 자신감 있게 판단할 수 있도록 한다.그 밖에 나는 hack 앞에 별표를 붙이는 것을 좋아한다. 사실 이것은 순전히 개인적인 습관이다.아마도 시간이 지나면 나는 이렇게 쓰지 않을 것이다. 허허.5. 빈칸을 넣는 것을 잊지 마세요.
Css 코드

.class_name {property: value; }  

.class_name {property: value; }

나는 개인적으로 합리적인 빈칸이 우수 코드의 지표라고 생각한다.영어의 습관에 따라 문장 뒤에 모두 빈칸을 넣어야 한다(This is a pen. That's a pencil. 문장 뒤에 빈칸을 넣지 않으면 word에 잘못된 힌트가 있을 수 있다).그래서 CSS가 외국인이 발명한 이상 그들의 격식에 따라 써야 한다.유사, JS에서 var a = b + c;안의 빈칸도 모두 넣어야 한다.6. CSS의 역할 도메인을 정의하기 위해 적절한 Cascading 또는 들여쓰기.'CSS의 역할역'은 무엇입니까?사실 모든 양식이 모든 곳에서 사용되는 것은 아니다.어떤 양식은 단지 한 덩어리 안에만 사용된다. 예를 들어'네비게이션 표시줄'의'검색창'은 다음과 같이 써야 할 수도 있다.
 
Css 코드

.nav .search {}  

.nav .search {}

때로는 겹쳐서 코드의 우선순위를 높일 수 있기 때문에 축소해서'상징적'으로 작용역을 나타낼 수도 있다.이렇게
 
Css 코드

.login_box {}   

   .forgot_pwd{}  

.login_box {}
   .forgot_pwd{}

들여쓰기는 해당 태그에 대해 모/자 관계가 있음을 나타내기 위한 것입니다.그러나 이것은 단지 깨우치는 작용을 할 수 있을 뿐이다.
에서