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

웹 사이트 시작 코드와 예제를 볼 때 CSS는 항상 "main.css", "default.css"또는 "Site.css"와 같은 별도의 파일에 있습니다. 그러나 페이지를 코딩 할 때 이미지에 "float : right"를 설정하는 것과 같이 DOM 요소와 함께 CSS를 인라인하는 경향이 종종 있습니다. 나는 이것이 예에서 거의 이루어지지 않기 때문에 이것이 "나쁜 코딩"이라는 느낌을 받는다.

스타일이 여러 객체에 적용되는 경우 "Dry't Repeat Yourself"(DRY)를 따르고 각 요소에서 참조 할 CSS 클래스에 지정하는 것이 좋습니다. 그러나 다른 요소에서 CSS를 반복하지 않는다면 HTML을 작성할 때 CSS를 인라인하지 않는 이유는 무엇입니까?

질문 : 인라인 CSS를 사용하는 것이 해당 요소에서만 사용될지라도 나쁜 것으로 간주됩니까? 그렇다면 왜 그렇습니까?

예 (이것이 나쁜가요?)

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

사이트를 다르게 보이게하려면 100 줄의 코드를 변경해야합니다. 귀하의 예에는 적용되지 않을 수도 있지만 인라인 CSS를 사용하는 경우

<div style ="font-size:larger; text-align:center; font-weight:bold">

페이지 헤더를 나타 내기 위해 각 페이지에서 다음과 같이 유지하는 것이 훨씬 쉽습니다.

<div class="pageheader">  

페이지 헤더가 단일 스타일 시트에 정의되어있어 전체 사이트에서 페이지 헤더의 모양을 변경하려는 경우 CSS를 한 곳에서 변경합니다.

그러나 나는 이단자가되어 당신의 모범에서 아무런 문제가 없다고 말할 것입니다. 단일 이미지의 동작을 대상으로하고 있는데, 아마도 단일 페이지에서 올바르게보아야하므로 실제 CSS를 스타일 시트에 배치하는 것은 너무 과도 할 수 있습니다.

다른 CSS 파일을 갖는 장점은

1. HTML 페이지를 쉽게 관리
2. 모양과 느낌으로 쉽게 변경할 수 있으며 페이지에서 많은 테마를 지원할 수 있습니다.
3. CSS 파일은 브라우저쪽에 캐시됩니다. 따라서 페이지를 새로 고치거나 사용자가 사이트를 탐색 할 때마다 일부 KB 데이터를로드하지 않음으로써 인터넷 트래픽에 약간의 기여를합니다.

빠른 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" />

이제 웹 사이트에서 rtl 언어를 지원하기를 원한다고 가정 해보십시오.

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

따라서 두 언어를 모두 지원하려면 인라인 스타일을 사용하여 부동 소수점 값을 할당 할 수 없습니다.

CSS를 사용하면 lang 속성으로 쉽게 처리됩니다.

따라서 다음과 같이 할 수 있습니다.

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

데모

인라인 CSS는 항상 연결된 스타일 시트 CSS보다 항상 우선합니다. 적절한 계단식 스타일 시트를 작성하고 작성하면 속성이 제대로 적용되지 않는 경우 이로 인해 엄청난 두통이 발생할 수 있습니다.

CSS는 표현을 마크 업에서 분리하는 것에 관한 것입니다. 둘을 함께 얽 으면 상황을 이해하고 유지하기가 훨씬 더 어려워집니다. 서버 측 컨트롤러 코드에서 데이터베이스 코드를 분리하는 것과 유사한 원리입니다.

마지막으로 20 개의 이미지 태그가 있다고 가정하십시오. 떠 다니도록 결정하면 어떻게됩니까?

CSS의 핵심은 내용과 내용을 분리하는 것입니다. 따라서 귀하의 예에서 콘텐츠와 프레젠테이션을 혼합하고 있으며 이는 "유해한 것으로 간주 될 수 있습니다".

인라인 CSS를 사용하면 유지 관리가 훨씬 어렵습니다.

변경하려는 모든 속성에 대해 인라인 CSS를 사용하려면 명확하게 정의되고 잘 구성된 CSS 파일을 찾는 대신 해당 HTML 코드를 찾아야합니다.

이것은 필기 코드에만 적용됩니다. 코드를 생성하는 경우 특히 요소와 컨트롤에 특별한 처리가 필요한 경우 인라인 스타일을 사용하는 것이 좋습니다.

DRY는 필기 코드에 대한 좋은 개념이지만 기계 생성 코드에서는 "Law of Demeter"를 선택합니다. "함께 속한 것은 함께 있어야합니다". 다른 "원격"CSS 파일에서 전역 스타일을 다시 편집하는 것보다 스타일 태그를 생성하는 코드를 조작하는 것이 더 쉽습니다.

귀하의 질문에 대한 답변 : 그것은 다릅니다 ...

한 요소에 대해 특정 스타일을 원하더라도 다른 페이지의 동일한 요소에 동일한 스타일을 적용 할 가능성을 고려해야한다고 생각합니다.

언젠가 누군가가 모든 페이지에서 같은 요소에 더 스타일 변경을 추가하거나 추가하도록 요청할 수 있습니다. 외부 CSS 파일에 스타일이 정의되어 있으면 스타일 만 변경하면 모든 페이지의 동일한 요소에 반영되므로 두통이 줄어 듭니다. :-)

코딩 방법을 코딩하지만 다른 사람에게 전달하는 경우 다른 사람이하는 일을 사용하는 것이 가장 좋습니다. CSS에는 이유가 있지만 인라인에는 이유가 있습니다. 나는 둘 다 사용하기가 더 쉽다. 동일한 반복이 많을 때 CSS를 사용하는 것이 좋습니다. 그러나 속성이 다른 여러 가지 요소가 있으면 문제가됩니다. 한 가지 예는 페이지에서 요소를 배치 할 때입니다. 각 요소는 서로 다른 상단 및 왼쪽 속성입니다. CSS에 모든 것을 넣으면 html과 css 페이지 사이의 혼란을 정말로 귀찮게 할 것입니다. 따라서 모든 글꼴이 같은 글꼴, 색상, 호버 효과 등을 갖기를 원할 때 CSS가 좋습니다. 그러나 모든 요소가 다른 위치에있을 때 각 요소에 대해 CSS 인스턴스를 추가하면 실제로 고통이 될 수 있습니다. 그래도 내 의견입니다. CSS는 코드를 파야 할 때 더 큰 응용 프로그램과 관련이 있습니다. Mozilla 웹 개발자 플러그인을 사용하면 요소 ID 및 클래스를 찾는 데 도움이됩니다.

이 예제와 같이 스타일을 한 번만 사용하더라도 여전히 CONTENT와 DESIGN을 혼합했습니다. 조회 "문제의 분리".

인라인 스타일을 사용하면 동일한 소스 파일에서 마크 업과 스타일을 효과적으로 혼합하므로 우려 분리 원칙을 위반합니다. 또한 대부분의 경우 단일 요소에만 적용 할 수있는 DRY (Do n't Repeat Yourself) 원칙을 위반하는 반면 클래스는 여러 요소에 적용될 수 있으며 CSS 규칙의 마법을 통해 확장 될 수도 있습니다! ).

또한 사이트에 스크립팅이 포함되어 있으면 클래스를 신중하게 사용하는 것이 좋습니다. 예를 들어, JQuery와 같은 인기있는 JavaScript 라이브러리는 선택 자로 클래스에 크게 의존합니다.

마지막으로 클래스를 사용하면 DOM에 명확성이 추가됩니다. 주어진 노드에 어떤 종류의 요소가 있는지 설명하는 설명자가 효과적으로 있기 때문입니다. 예를 들면 다음과 같습니다.

<div class="header-row">It's a row!</div>

다음보다 훨씬 표현력이 좋습니다.

<div style="height: 80px; width: 100%;">It's...something?</div>

인 페이지 CSS는 현재 Google이 별도의 파일에서로드 한 CSS보다 더 나은 사용자 경험을 제공한다고 평가하기 때문에 인 페이지 CSS입니다. 가능한 해결책은 CSS를 텍스트 파일에 넣고 PHP로 즉시로드하여 문서 헤드에 출력하는 것입니다. 이 <head>섹션에는 다음이 포함됩니다.

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

필요한 CSS를 styles / style1.txt에 넣으면 <head> 문서 섹션에 . 이렇게하면 모든 페이지에서 공유 할 수있는 스타일 템플릿 style1.txt를 사용할 수있는 인 페이지 CSS를 사용하여 하나의 파일만으로 사이트 전체의 스타일을 변경할 수 있습니다. 또한이 방법을 사용하면 브라우저가 서버에서 별도의 CSS 파일을 요청할 필요가 없습니다 (따라서 검색 / 렌더링 시간 최소화). 모든 것이 PHP에 의해 한 번에 제공되기 때문입니다.

이 기능을 구현하면 필요한 경우 개별 일회용 스타일을 수동으로 코딩 할 수 있습니다.

인라인 CSS는 기계로 생성 된 코드에 적합하며 대부분의 방문자가 사이트에서 한 페이지 만 탐색 할 경우에는 문제가 없지만 미디어 쿼리를 처리하여 다른 크기의 화면을 다르게 볼 수 있습니다. 이를 위해서는 CSS를 외부 스타일 시트 또는 내부 스타일 태그에 포함시켜야합니다.

위에서 별도의 파일로 CSS를 작성하는 것이 코드 재사용 성, 유지 관리 성, 더 나은 관심사 분리보다 낫다는 위에서 주어진 모든 대답에 전적으로 동의하더라도 사람들이 생산 코드에서 인라인 CSS를 선호하는 많은 시나리오가 있습니다.

외부 CSS 파일로 인해 브라우저에 대한 추가 HTTP 호출이 발생하여 대기 시간이 추가로 발생합니다. 대신 CSS가 인라인으로 삽입되면 브라우저가 즉시 구문 분석을 시작할 수 있습니다. 특히 SSL을 통한 HTTP 호출은 비용이 많이 들고 페이지에 추가 대기 시간이 추가됩니다. 외부 CSS 파일을 인라인 코드로 삽입하여 정적 HTML 페이지 (또는 페이지 스 니펫)를 생성하는 데 유용한 많은 도구가 있습니다. 이 도구는 프로덕션 바이너리가 생성되는 빌드 및 릴리스 단계에서 사용됩니다. 이렇게하면 외부 CSS의 모든 장점을 얻을 수 있으며 페이지가 더 빨라집니다.

AMP HTML 스펙 에 따르면, 성능 목적을 위해 CSS를 HTML 파일 (외부 스타일 시트와 함께)에 넣어야합니다. 이것은 인라인 CSS를 의미하지 않지만 외부 스타일 시트를 지정하지 않습니다 .

이러한 서빙 시스템이 수행 할 수있는 불완전한 최적화 목록은 다음과 같습니다.

• 이미지 참조를 뷰어의 뷰포트 크기의 이미지로 바꿉니다.
• 접힌 부분 위에 보이는 인라인 이미지.
• 인라인 CSS 변수
• 확장 구성 요소를 사전로드하십시오.
• HTML과 CSS를 축소하십시오.

다른 답변 외에도 인라인 CSS에서 의사 클래스 또는 의사 요소를 타겟팅 할 수 없습니다