인라인 CSS가 뭐가 그렇게 안 좋습니까?

인라인 CSS가 뭐가 그렇게 안 좋습니까?

웹 사이트 스타터 코드와 예제를 볼 때 CSS는 항상 "main.css", "default.css" 또는 "Site.css"와 같은 이름의 별도 파일에 있습니다.그러나 페이지를 코딩할 때 이미지에 "float: right"을 설정하는 것과 같이 종종 DOM 요소와 함께 CSS를 인라인으로 던지고 싶은 유혹을 받습니다.예를 들어 거의 하지 않기 때문에 이것이 "나쁜 코딩"이라는 느낌이 듭니다.

여러 개체에 스타일을 적용할 경우 "DON'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 파일은 브라우저 쪽에 캐시될 것입니다.따라서 페이지가 새로 고쳐지거나 사용자가 사이트를 탐색할 때마다 kbs의 데이터를 로드하지 않음으로써 인터넷 트래픽에 약간의 기여를 할 수 있습니다.

빠른 CSS 프로토타이핑을 위한 html5 접근 방식

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

해킹 CSS

디버깅 중이고 페이지-CSS를 수정하려면 특정 섹션만 더 보기 좋게 만들어야 합니다.빠르고 더럽고 유지할 수 없는 방식으로 스타일을 만드는 대신 요즘 제가 하는 일을 하고 단계적으로 접근하면 됩니다.

인라인 스타일 속성 없음

절대로 css를 인라인으로 만들지 말라는 뜻입니다.<element style='color:red'>또는 심지어<img style='float:right'>매우 편리하지만 나중에 실제 css 파일에 실제 selector 특정성이 반영되지 않아 보관하면 나중에 유지보수 부하를 후회하게 됩니다.

프로토타입(프로토타입)<style>대신

in-page 대신 in-page 를 사용하는 인라인 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개라고 가정합니다.왼쪽으로 띄워야 한다고 결정하면 어떻게 됩니까?

손으로 쓴 코드에만 해당됩니다.코드를 생성하면 인라인 스타일을 여기저기 사용해도 괜찮다고 생각합니다. 특히 요소와 컨트롤이 특별한 처리가 필요한 경우에는 더욱 그렇습니다.

DRY는 손으로 쓴 코드에 대한 좋은 개념이지만, 기계로 생성된 코드에서 저는 "Demeter의 법칙": "함께 속한 것은 함께 있어야 한다"를 선택했습니다.다른 "원격" CSS 파일에서 글로벌 스타일을 두 번째 편집하는 것보다 스타일 태그를 생성하는 코드를 조작하는 것이 더 쉽습니다.

당신의 질문에 대한 답은...

인라인 CSS를 사용하는 것은 유지하기가 훨씬 더 어렵습니다.

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

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

다른 답변 외에도 MDN(https://infosec.mozilla.org/guidelines/web_security#content-security-policy 의 권장 콘텐츠 보안 정책을 위반한다는 점도 우려됩니다.

그들이 사용하는 정당성은 인라인 자바스크립트, XSS 등이 해롭다는 것이지만, 인라인 스타일도 비활성화해야 하는 이유는 정당화되지 않습니다.누군가 그 이유에 대해 언급할 수 있을지도 모르지만, 그 전까지는 권위에 호소하고 인라인 스타일을 피하는 것이 보안 모범 사례라고 주장할 것입니다.

코딩 방법을 코드화하되 다른 사람에게 전달하는 경우 다른 사람이 하는 것을 사용하는 것이 가장 좋습니다.CSS에는 이유가 있고, 인라인에는 이유가 있습니다.저는 두 가지를 다 사용합니다. 왜냐하면 그것은 저에게 더 쉽기 때문입니다.CSS를 사용하는 것은 같은 반복이 많을 때 아주 좋습니다.그러나 속성이 다른 여러 요소가 있으면 문제가 됩니다.한 가지 예로, 페이지에 요소를 배치하는 경우를 들 수 있습니다.각 요소는 서로 다른 상단 및 왼쪽 속성입니다.만약 내가 그것을 모두 CSS에 넣는다면 html과 css 페이지 사이로 가는 나를 정말 짜증나게 할 것입니다.따라서 CSS는 모든 것이 동일한 폰트, 컬러, 호버 효과 등을 가지기를 원할 때 좋습니다.그러나 모든 것이 다른 위치에 있을 때 각 요소에 대해 CSS 인스턴스를 추가하는 것은 정말로 어려운 일이 될 수 있습니다.그것은 제 의견일 뿐입니다.CSS는 코드를 파헤쳐야 할 때 더 큰 애플리케이션에서 큰 관련성을 갖습니다.Mozilla 웹 개발자 플러그인을 사용하면 요소 ID와 클래스를 찾을 수 있습니다.

한 가지 요소에 대해 특정 스타일을 갖고 싶어도 같은 스타일을 다른 페이지에 적용하고 싶어할 가능성을 고려해야 한다고 생각합니다.

어느 날 누군가가 모든 페이지의 동일한 요소에 스타일 변경을 추가하거나 변경을 요청할 수 있습니다.외부 CSS 파일에 정의된 스타일이 있다면 거기서만 변경하면 되고 모든 페이지에 동일한 요소로 반영되어 두통을 덜 수 있습니다. :-)

이 예와 같이 스타일을 한 번만 사용해도 내용과 디자인이 혼재되어 있습니다."관심사 분리"를 찾습니다.

인라인 스타일을 사용하는 것은 마크업과 스타일을 동일한 소스 파일에서 효과적으로 혼합하기 때문에 관심 분리 원칙에 위배됩니다.또한 대부분의 경우 단일 요소에만 적용할 수 있기 때문에 DRY(Don't Repeat Yourself) 원칙을 위반하는 반면 클래스는 여러 개의 요소에 적용할 수 있습니다(그리고 CSS 규칙의 마법을 통해 확장될 수도 있습니다!).

또한 사이트에 스크립팅이 포함되어 있는 경우에는 클래스를 신중하게 사용하는 것이 좋습니다.예를 들어, JQuery와 같은 인기 있는 자바스크립트 lib들은 셀렉터로서 클래스에 크게 의존합니다.

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

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

다음보다 훨씬 더 표현력이 뛰어납니다.

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

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

개인적으로 인라인 css에 대한 혐오는 말도 안 되는 것 같습니다.강경한 컬트 행위, 사람들은 그저 "관심사 분리!"를 수줍게 반복할 뿐입니다.네, 반복적인 요소가 있어서 CSS 파일에서 대상으로 하는 클래스를 사용하려면 반복적인 스타일링이 필요할 때가 있지만, 대부분의 경우 스타일을 인라인으로 넣기 위해 개발 속도와 CLEARITY OF CODE를 개선합니다. 코드를 보고 사용자 지정 마진 높이가 있는 것을 볼 수 있으면 HTML 작업을 상상하는 데 도움이 됩니다.어떤 스타일을 적용할 것인지에 대한 통찰력을 거의 주지 않는 명명된 클래스 대신 전체적으로 문서.

그래서 저는 여기서 반대자가 되어 인라인 CSS는 훌륭하고 그것을 사용한다고 소리지르는 사람들은 실제로 그것에 편견 없는 원래의 고려를 하지 않고 그들이 들은 것을 따를 뿐이라고 말할 것입니다.

구글이 별도의 파일에서 로드된 CSS보다 더 나은 사용자 경험을 제공하는 것으로 평가하기 때문에 페이지 내 CSS는 현재 중요합니다.css를 텍스트 파일에 넣고 php로 fly에 로드하여 문서 헤드에 출력하는 것이 가능한 해결책입니다.e<head>섹션은 다음을 포함합니다.

<head> ...

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

... </head>

style/style1에 필요한 css를 넣습니다.txt 그리고 그것은 그 안에 뱉어질 것입니다.<head>문서의 섹션입니다.이렇게 하면 스타일 템플릿인 style1을 사용할 수 있는 장점이 있는 페이지 내 CSS가 제공됩니다.txt는 모든 페이지에서 공유할 수 있으며, 하나의 파일을 통해서만 사이트 전체 스타일을 변경할 수 있습니다.또한 이 방법은 모든 것이 php에 의해 한 번에 전달되기 때문에 브라우저가 서버에 별도의 cs 파일을 요청할 필요가 없습니다(따라서 검색/렌더링 시간을 최소화합니다).

이를 구현하면 필요에 따라 개별 일회용 스타일을 수동으로 코딩할 수 있습니다.

AMP HTML 사양에 따르면 성능을 위해 HTML 파일(외부 스타일시트 대비)에 CSS를 넣어야 합니다.인라인 CSS를 의미하는 것은 아니지만 외부 스타일시트는 지정하지 않습니다.

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

• 이미지 참조를 뷰어의 뷰포트에 맞게 크기가 지정된 이미지로 바꿉니다.
• 접기 위에 보이는 인라인 이미지.
• 인라인 CSS 변수.
• 확장 구성 요소를 미리 로드합니다.
• HTML 및 CSS를 최소화합니다.

CSS를 별도의 파일로 작성하는 것이 코드 재사용성, 유지보수성, 우려 사항의 더 나은 분리보다 항상 더 낫다는 위의 모든 답변에 전적으로 동의하지만, 생산 코드에서 인라인 CSS를 선호하는 많은 시나리오가 있습니다.

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

인라인 CSS에서는 다른 답변 외에 유사 클래스나 유사 요소를 대상으로 할 수 없습니다.

HTML, XML, 컴퓨터 언어, 비정형 텍스트, DSV 등 모든 종류의 텍스트 아티팩트에 대한 포함 파일 기능을 제공하는 템플릿 기반 아티팩트 생성기를 만들었습니다(예를 들어 스크립팅 없이 일반적인 웹 또는 수동 페이지 머리글과 바닥글을 처리하는 데 유용합니다.

이 태그를 사용하여 "헤드" 태그 안에 "스타일" 태그를 제공하면 "관심사 분리" 인수가 사라지고 "템플릿을 변경할 때마다 재생성해야 합니다" 및 "템플릿이 생성하는 것에서 템플릿을 디버깅해야 합니다"로 대체됩니다.그러한 불만은 컴퓨터 언어가 전처리기(또는 M4를 사용하기 시작한 사람)를 처음 사용했을 때부터 있어 왔습니다.

전반적으로, CSS 파일 또는 "스타일" 태그의 메타화 기능이 요소 레벨 스타일링보다 더 깨끗하고 오류가 덜하다고 생각합니다.하지만 그것은 전문적인 판단이 필요하기 때문에 초보자나 산란한 두뇌는 신경쓰지 않습니다.

언급URL : https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css