인라인 CSS와 외부 CSS 파일을 배경 이미지로 사용하면 어떤 이점이 있습니까?

Question

나는 여기에서 가장 좋은 접근 방법을 결정합니다. 내가 여러 페이지 (배경 이미지가 다른 각 페이지)에 첨부하려는 배경 이미지가 있다고 가정 해 보겠습니다. 페이지 자체가 반응합니다.

<div class="hero" style="background: url('../images/pagebg.jpg') no-repeat 50% 50%/cover;"></div> 

아니면 외부 CSS를 가지고 같은 것을 할 : - - :이 (인라인 CSS) 같은 것을 할 경우 그것은 더 좋을 것이다

.hero { 
height: 100%; 
width: 100%; 
position: relative; 
top: 0px; 
left: 0px; 
display: block;  
} 
.hero-page1bg { 
background: url('../images/pg1.jpg') no-repeat 50% 50% ; 
background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
-webkit-background-size: cover; 
} 

내가 넣어 내 HTML 페이지를 그것은 나에게 미디어 쿼리를 사용하여 첫 번째 방법 (인라인 CSS)에 비해 다른 장치를위한 작은 파일 크기를 할당의 유연성을 제공하기 때문에 좀 더 두 번째 방법으로 기울고 있어요이

<div class="hero .hero-page1bg"></div> 

. 그러나 첫 번째 방법 (인라인 CSS)을 사용하고 모든 장치에 대해 동일한 배경 파일을 (폴더 구조와 파일 이름을 기반으로) 호출하여 너무 많은 반응 웹 사이트를 보았습니다. 따라서 모바일 장치에서 큰 파일 크기를 다운로드해야합니다.

CMS를 통해 사이트를 관리해야하는 경우 클라이언트가 CSS 파일을 변경하는 것보다 인라인 CSS를 사용하는 것이 더 쉬운 것처럼 보이기 때문에 인라인 CSS는 논리적 인 접근 방법처럼 보입니다.

올바른 접근 방식은 무엇입니까? 인라인 또는 외부? 그리고 CMS가 있든 없든? 어느쪽으로 가니?

미리 감사드립니다. 건배

Answer 1

두 번째 방법을 사용해야한다고 생각합니다. 항상 인라인 CSS를 사용하지 마십시오. CMS를 사용하는 경우에도 실제로는 나쁜 습관입니다.

HTML을 깨끗하게 유지해야합니다 (자바 스크립트에도 같은 방법이 적용됩니다). 처음에는 유용하고 유용하지만 나중에 코드를 유지해야 할 때 엉망이 될 수 있습니다.

Answer 2

별도의 스타일 시트로 분할하는 일반적인 이유는 필연적으로 "코드 란 무엇인가"및 "무엇이 무엇입니까?"(/ 스타일링).

그러나 기본적으로 유동적 인 레이아웃을 사용하는 경우 미디어 쿼리는 큰 보너스입니다. css 파일에서 힙을 캐싱하여 전체 서버로드를 줄일 수도 있습니다.