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

인라인 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>요소를 사용하면 대안이 있습니다.

---

다른 답변들 외에도 .... 국제화 .

Depending of the language of the content - you often need to adapt the styling of an element.

One obvious example would be right-to-left languages.

Let's say you used your code:

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

Now say you want your website to support rtl languages - you would need:

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

So now, if you want to support both languages, there's no way to assign a value to float using inline styling.

With CSS this is easily taken care of with the lang attribute

So you could do something like this:

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

Demo

---

Inline CSS will always, always win in precedence over any linked-stylesheet CSS. This can cause enormous headache for you if and when you go and write a proper cascading stylesheet, and your properties aren't applying correctly.

It also hurts your application semantically: CSS is about separating presentation from markup. When you tangle the two together, things get much more difficult to understand and maintain. It's a similar principle as separating database code from your controller code on the server side of things.

Finally, imagine that you have 20 of those image tags. What happens when you decide that they should be floated left?

---

The whole point of CSS is to separate content from its presentation. So in your example you are mixing content with presentation and this may be "considered harmful".

---

Using inline CSS is much harder to maintain.

For every property you want to change, using inline CSS requires you to look for the corresponding HTML code, instead of just looking inside clearly-defined and hopefully well-structured CSS files.

---

This only applies to handwritten code. If you generate code, I think that it's okay to use inline styles here and then, especially in cases where elements and controls need special treatment.

DRY is a good concept for handwritten code, but in machine-generated code, I opt for "Law of Demeter": "What belongs together, must stay together". It's easier to manipulate code that generates Style tags than to edit a global style a second time in a different and "remote" CSS file.

The answer to your question: it depends...

---

I think that even if you want to have a certain style for one element, you have to consider the possibility that you may want to apply the same style on the same element on different pages.

One day somebody may ask to change or add more stylistic changes to the same element on every page. If you had the styles defined in an external CSS file, you would only have to make changes there, and it would be reflected in the same element in all of the pages, thus saving you a headache. :-)

---

Code how you like to code, but if you are passing it on to someone else it is best to use what everyone else does. There are reasons for CSS, then there are reasons for inline. I use both, because it is just easier for me. Using CSS is wonderful when you have a lot of the same repetition. However, when you have a bunch of different elements with different properties then that becomes a problem. One instance for me is when I am positioning elements on a page. Each element as a different top and left property. If I put that all in a CSS that would really annoy the mess out of me going between the html and css page. So CSS is great when you want everything to have the same font, color, hover effect, etc. But when everything has a different position adding a CSS instance for each element can really be a pain. That is just my opinion though. CSS really has great relevance in larger applications when your having to dig through code. Use Mozilla web developer plugin and it will help you find the elements IDs and Classes.

---

Even if you only use the style once as in this example you've still mixed CONTENT and DESIGN. Lookup "Separation of concerns".

---

Using inline styles violates the Separation of Concerns principle, as you are effectively mixing markup and style in the same source file. It also, in most cases, violates the DRY (Don't Repeat Yourself) principle since they are only applicable to a single element, whereas a class can be applied to several of them (and even be extended through the magic of CSS rules!).

Furthermore, judicious use of classes is beneficial if your site contains scripting. For example, several popular JavaScript libs such as JQuery depend heavily on classes as selectors.

Finally, using classes adds additional clarity to your DOM, since you effectively have descriptors telling you what kind of element a given node in it is. For example:

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

Is a lot more expressive than:

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

---

In-page css is the in-thing at the moment because Google rates it as giving a better user experience than css loaded from a separate file. A possible solution is to put the css in a text file, load it on the fly with php, and output it into the document head. In the <head> section include this:

<head> ...

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

... </head>

Put the required css in styles/style1.txt and it'll get spat out in the <head> section of your document. This way, you'll have in-page css with the benefit of using a style template, style1.txt, which can be shared by any and all pages, allowing site-wide style changes to be made via only that one file. Furthermore, this method doesn't require the browser to request separate css files from the server (thus minimising retrieval / rendering time), since everything is delivered at once by php.

Having implemented this, individual one-time-only styles can be manually coded where needed.

---

Inline CSS is good for machine-generated code, and can be fine when most visitors only browse one page on a site, but one thing it can't do is handle media queries to allow different looks for screens of different sizes. For that, you need to include the CSS either in an external style sheet or in an internal style tag.

---

Even though I totally agree with all the answers given above that writing CSS in a separate file is always better from code reusability, maintainability, better separation of concerns there are many scenarios where people prefer inline CSS in their production code -

The external CSS file causes one extra HTTP call to browser and thus additional latency. Instead if the CSS is inserted inline then browser can start parsing it right away. Especially over SSL HTTP calls are more costly and adds up additional latency to the page. There are many tools available that helps to generate static HTML pages (or page snippet) by inserting external CSS files as inline code. These tools are used at the Build and Release phase where the production binary is generated. This way we get all the advantages of external CSS and also the page becomes faster.

---

According to the AMP HTML Specification it is necessary to put CSS in your HTML file (vs an external stylesheet) for performance purposes. This does not mean inline CSS but they do specify no external stylesheets.

An incomplete list of optimizations such a serving system might do is:

• Replace image references with images sized to the viewer’s viewport.
• Inline images that are visible above the fold.
• Inline CSS variables.
• Preload extended components.
• Minify HTML and CSS.

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