[css] 인라인 CSS의 나쁜 점은 무엇입니까?

빠른 CSS 프로토 타이핑에 대한 html5 접근

또는 : <style>더 이상 태그가 더 이상 머리만을위한 것이 아닙니다!

CSS 해킹

디버깅 중이고 page-css를 수정하고 특정 섹션 만보기 좋게 만들고 싶다고 가정 해 보겠습니다. 빠르고 더럽고 유지 관리 할 수없는 스타일을 인라인으로 만드는 대신 요즘 내가하는 일을 수행하고 단계적으로 접근 할 수 있습니다.

인라인 스타일 속성이 없습니다.

CSS를 인라인으로 만들지 마십시오. <element style='color:red'>즉, 심지어 <img style='float:right'>매우 편리하지만 나중에 실제 CSS 파일에 실제 선택기 특이성을 반영하지 않으며 나중에 유지하면 나중에 유지 관리 부하를 후회하게됩니다.

<style>대신 프로토 타입

인라인 CSS를 사용했을 경우 대신 인 페이지 <style> 요소 를 사용하십시오 . 사용해보십시오! 모든 브라우저에서 잘 작동하므로 테스트하기에 적합하지만 원할 때 / 필요할 때마다 이러한 CSS를 전역 CSS 파일로 우아하게 이동할 수 있습니다! (* 셀렉터는 사이트 수준의 특이성 대신 페이지 수준의 특이성 만 가지므로 너무 일반적 임에주의하십시오) CSS 파일에서와 같이 깨끗합니다.

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

다른 사람의 인라인 CSS 리팩토링

때로는 문제조차 발생하지 않으며 다른 사람의 인라인 CSS를 다루고 있으므로 리팩터링해야합니다. 이것은 또 다른 위대한 사용입니다<style> 페이지 하므로 리팩토링하는 동안 인라인 CSS를 직접 제거하고 클래스 또는 ID 또는 선택기에서 바로 페이지에 배치 할 수 있습니다. 선택기에주의를 기울이면 복사 및 붙여 넣기만으로 최종 결과를 전역 CSS 파일로 이동할 수 있습니다.

CSS의 모든 비트를 즉시 전역 CSS 파일 로 전송하는 것은 약간 어렵지만 인 페이지 <style>요소를 사용하면 대안이 있습니다.

답변

<img src="myimage.gif" style="float:right" />

<img src="myimage.gif" style="float:left" />

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}