CSS를 포함하는 가장 좋은 방법은?

Programing

CSS를 포함하는 가장 좋은 방법은?

lottogame 2020. 3. 26. 08:18

CSS를 포함하는 가장 좋은 방법은? @import를 사용해야하는 이유

기본적으로 @import스타일 시트를 기존 스타일 시트로 가져 오는 데 사용 하는 것의 장점 / 목적이 무엇인지 궁금합니다 .

<link rel="stylesheet" type="text/css" href="" />

문서의 머리에?

@import스타일 시트가 동시에 다운로드되는 것을 방지 할 수 있으므로 페이지 속도 관점 에서 CSS 파일을 사용해서는 안됩니다. 예를 들어, 스타일 시트 A에 텍스트가 포함 된 경우 :

@import url("stylesheetB.css");

그런 다음 첫 번째 스타일 시트가 다운로드 될 때까지 두 번째 스타일 시트 다운로드가 시작되지 않을 수 있습니다. 반면에 두 스타일 시트가 <link>기본 HTML 페이지의 요소에서 참조되는 경우 두 스타일 시트를 동시에 다운로드 할 수 있습니다. 두 스타일 시트가 항상 함께로드 된 경우 단순히 단일 파일로 결합하는 것이 도움이 될 수 있습니다.

때때로 @import적절한 상황 이 있지만 일반적으로 규칙이 아니라 예외입니다.

나는 사람들이 너무 동의 할 때 싫어하기 때문에 악마의 옹호자를 할 것입니다.

1. 다른 스타일 시트에 의존하는 스타일 시트가 필요하면 @import를 사용하십시오. 별도의 단계에서 최적화를 수행하십시오.

주어진 시간에 최적화하는 두 가지 변수, 즉 코드의 성능과 개발자 의 성능이 있습니다. 대부분의 경우는 아니지만 대부분의 경우 개발자의 효율성을 높이고 코드의 성능을 향상시키는 것이 더 중요합니다 .

다른 스타일 시트에 의존 하는 하나의 스타일 시트가 있는 경우 가장 논리적으로해야 할 일은 두 개의 별도 파일에 넣고 @import를 사용하는 것입니다. 그것은 코드를 보는 다음 사람에게 가장 논리적으로 의미가 있습니다.

(이러한 종속성이 언제 발생합니까? 제 생각에는 아주 드물지만 일반적으로 하나의 스타일 시트로 충분합니다. 그러나 다른 CSS 파일에 물건을 넣을 수있는 논리적 장소가 있습니다.

테마 : 같은 페이지에 대해 다른 색 구성표 나 테마가있는 경우 일부 구성 요소는 공유하지만 일부 구성 요소는 공유하지 않을 수 있습니다.

하위 구성 요소 : 고안된 예-메뉴가 포함 된 식당 페이지가 있다고 가정 해보십시오. 메뉴가 나머지 페이지와 매우 다른 경우 자체 파일에 있으면 유지 관리가 더 쉬워집니다.

일반적으로 스타일 시트는 독립적이므로 모두를 사용하여 포함시키는 것이 합리적 <link href>입니다. 그러나 종속 계층 구조 인 경우 가장 논리적으로 수행하는 작업을 수행해야합니다.

파이썬은 수입을 사용합니다; C는 다음을 포함합니다. JavaScript가 필요합니다. CSS는 가져 왔습니다; 필요할 때 사용하십시오!

2. 사이트를 확장해야 할 시점에 도달하면 모든 CSS를 연결하십시오.

여러 CSS 요청 어떤 여부 링크를 통해 또는 @imports을 통해 - - 종류의 나쁜 관행입니다 고성능 웹 사이트. 최적화가 중요한 시점에 도달하면 모든 CSS가 축소기를 통과해야합니다. Cssmin 은 import 문을 결합합니다. @Brandon이 지적했듯이 grunt는 여러 가지 옵션을 제공합니다. ( 이 질문도 참조하십시오 ).

<link>사람들이 지적한 것처럼 축소 된 단계에 도달하면 더 빠르므로 대부분의 스타일 시트에 연결하고 가능한 경우 @import를 가져 오지 마십시오.

사이트가 생산 규모에 도달하기 전에 코드가 약간 더 빨라지는 것보다 체계적이고 논리적으로 구성하는 것이 중요합니다.

@import속도상의 이유로 CSS를 페이지에 포함 시키지 않는 것이 가장 좋습니다 . 이 우수한 기사를 참조하여 이유를 알아보십시오. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

또한 축소 스크립트는 다른 CSS 파일에서 @import 행을 "제거"할 수 없기 때문에 @import 태그를 통해 제공되는 CSS 파일을 축소하고 결합하기가 더 어렵습니다. <link 태그로 포함하면 기존 축소 PHP / dotnet / java 모듈을 사용하여 축소를 수행 할 수 있습니다.

따라서 : <link />대신 사용하십시오 @import.

링크 방법을 사용하면 스타일 시트가 병렬로로드되고 (더 빠르고 빠름) 거의 모든 브라우저가 링크를 지원합니다

import는 추가 CSS 파일을 하나씩 (느리게)로드하고 스타일이없는 컨텐츠의 Flash를 제공 할 수 있습니다.

@ 네보 이즈 나드 미쇼 그루 구르

다음은 @import를 사용하는 올바른 방법입니다.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/@import

헤드에 CSS 스타일 시트를 추가하는 것과 가져 오기 기능을 사용하는 것에는 큰 차이가 없습니다. 사용은 @import일반적으로 하나가 쉽게 확장 할 수 있도록 스타일 시트를 체인에 사용됩니다. 예를 들어 일반적인 CSS 정의와 함께 다른 색상 레이아웃을 쉽게 교체하는 데 사용할 수 있습니다. 나는 주요 장점 / 목적은 확장 성이라고 말합니다.

이식성 및 유지 관리 성이 추가 이점이라는 xbonez 의견에 동의합니다.

그들은 매우 비슷합니다. 어떤 사람들은 @import가 더 관리하기 쉽다고 주장 할 수 있습니다. 그러나 각 @import는 "link"메소드를 사용하는 것과 동일한 방식으로 새 HTTP 요청 비용이 발생합니다. 따라서 속도와 관련하여 더 빠르지 않습니다. 그리고 "duskwuff"가 말했듯이 그것은 동시에로드되지 않으며 이는 몰락입니다.

@import를 사용하는 한 곳은 영어와 프랑스어의 두 가지 버전의 페이지를 수행 할 때입니다. main.css를 사용하여 내 페이지를 영어로 작성합니다. 프랑스어 버전을 만들면 프랑스어 스타일 시트 (main_fr.css)에 연결됩니다. 프랑스어 스타일 시트 상단에서 main.css를 가져온 다음 프랑스어 버전에서 필요한 부분에 대한 특정 규칙을 재정의합니다.

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm 에서 인용

@import 메소드의 주요 목적은 페이지에서 여러 스타일 시트를 사용하지만 <head>에는 하나의 링크 만 사용하는 것입니다. 예를 들어 회사에는 사이트의 모든 페이지에 대한 전역 스타일 시트가있을 수 있으며 하위 섹션에는 해당 하위 섹션에만 적용되는 추가 스타일이 있습니다. 하위 섹션 스타일 시트에 연결하고 해당 스타일 시트의 맨 위에있는 전역 스타일을 가져 오면 사이트 및 모든 하위 섹션에 대한 모든 스타일이 포함 된 거대한 스타일 시트를 유지할 필요가 없습니다. 유일한 요구 사항은 @import 규칙이 나머지 스타일 규칙보다 먼저 있어야한다는 것입니다. 그리고 상속은 여전히 문제가 될 수 있습니다.

때로는 inline 대신 @import를 사용해야합니다. 32 개 이상의 CSS 파일이있는 복잡한 응용 프로그램을 작업 중이고 IE9를 지원해야하는 경우에는 선택의 여지가 없습니다. IE9는 처음 31 이후의 CSS 파일을 무시하며 여기에는 인라인 CSS가 포함됩니다. 그러나 각 시트는 31 개를 가져올 수 있습니다.

@import를 사용해야하는 많은 이유가 있습니다.

@import를 사용하는 강력한 이유 중 하나는 브라우저 간 디자인을 수행하는 것입니다. 가져온 시트는 일반적으로 많은 구형 브라우저에서 숨겨져 있으므로 Netscape 4 이상 시리즈, Mac 용 Internet Explorer 5.2, Opera 6 이상 및 PC 용 IE 3 및 4와 같은 매우 오래된 브라우저에 특정 형식을 적용 할 수 있습니다.

이렇게하려면 base.css 파일에서 다음을 수행 할 수 있습니다.

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

가져온 사용자 정의 시트 (newerbrowsers.css)에서 최신 계단식 스타일을 적용하면됩니다.

html body {
  font-size:1em;
}

"em"단위를 사용하면 글꼴과 디자인이 모두 사용자 설정에 따라 확장 될 수 있으므로 "px"단위보다 우수합니다. 이전 브라우저는 픽셀 기반 (보다 엄격하고 브라우저 사용자 설정에서는 변경할 수 없음)에 비해 더 우수합니다. . 가져온 시트는 대부분의 이전 브라우저에서 보이지 않습니다.

누가 신경 쓰겠는지! 더 큰 구식 정부 또는 기업 시스템으로 가보면 여전히 오래된 브라우저가 사용되는 것을 볼 수 있습니다. 그러나 오늘날 정말 좋아하는 브라우저도 언젠가는 구식이 될 것이기 때문에 정말 좋은 디자인입니다. 제한적인 방식으로 CSS를 사용한다는 것은 이제 사이트에서 잘 작동하지 않는 사용자 에이전트 그룹이 점점 더 커지고 있음을 의미합니다.

@import를 사용하면 브라우저 간 웹 사이트 호환성이 99.9 %의 채도에 도달 할 수 있습니다. 이전 브라우저는 가져온 시트를 읽지 못하기 때문입니다. HTML에 간단한 기본 글꼴 세트를 적용 할 수 있지만 최신 에이전트는 고급 CSS를 사용합니다. 이를 통해 최신 데스크탑 브라우저에 필요한 풍부한 시각적 디스플레이를 손상시키지 않으면 서 이전 에이전트가 컨텐츠에 액세스 할 수 있습니다.

최신 브라우저는 웹 사이트를 처음 호출 한 후 HTML 구조와 CSS를 매우 잘 캐시합니다. 서버에 대한 다중 호출은 한 번의 병목 현상이 아닙니다.

스마트 장치에 업로드 된 메가 바이트 및 메가 바이트의 Javascript API 및 JSON과 페이지간에 일관성이없는 HTML 마크 업이 잘못 설계되어 오늘날 느린 렌더링의 주요 동인입니다. 평균적인 Google 뉴스 페이지는 텍스트를 약간만 렌더링하기 위해 6MB 이상의 ECMAScript입니다. 롤

자바 스크립트 서커스 트릭을 통해 조작하고 변경하지 않는 한 브라우저가 일관된 DOM 마크 업과 CSS를 캐시하기 때문에 몇 킬로바이트의 캐시 된 CSS와 더 작은 자바 스크립트 풋 프린트를 가진 일관된 클린 HTML은 사용자 에이전트에서 매우 빠른 속도로 렌더링됩니다.

이것의 핵심은 실제로 여러 CSS 스타일 시트를 작성하는 두 가지 이유라고 생각합니다.

웹 사이트의 페이지마다 다른 CSS 정의가 필요하기 때문에 여러 시트를 작성합니다. 또는 적어도 그들 모두가 다른 페이지에 필요한 모든 CSS 정의를 요구하지는 않습니다. 따라서 다른 페이지에로드되는 시트를 최적화하고 너무 많은 CSS 정의를로드하지 않도록 CSS 파일을 분할합니다.
염두에 두어야 할 두 번째 이유는 CSS가 커지고 처리하기가 어려워지고 큰 CSS 파일을 쉽게 유지 관리하기 위해 여러 CSS 파일로 분할하기 때문입니다.

첫 번째 이유로 추가 <link>태그가 적용되므로 페이지마다 다른 CSS 파일 세트를로드 할 수 있습니다.

두 번째 이유로 @import여러 CSS 파일을 가져 오지만로드 된 파일은 항상 동일하므로 명령문이 가장 편리한 것으로 나타납니다.

로딩 시간의 관점에서 다르지 않습니다. 브라우저는 분리 된 CSS 파일이 어떻게 구현 되든지 확인하고 다운로드해야합니다.

Eric Meyer의 Reset CSS v2.0과 같은 CSS RESET을 사용하는 경우 CSS에서 @import를 사용하면 CSS를 적용하기 전에 작동하므로 충돌을 방지 할 수 있습니다.

@import는 여러 장치에 대한 코드를 작성할 때 가장 유용하다고 생각합니다. 해당 장치의 스타일 만 포함하도록 조건문을 포함하면 한 장만로드됩니다. 여전히 일반적인 스타일 요소를 추가하기 위해 링크 태그를 사용할 수 있습니다.

추가 할 수있는 링크 된 스타일 시트의 "높은 피크"를 경험했습니다. 링크 된 자바 스크립트를 여러 개 추가해도 무료 호스트 제공 업체에게는 문제가되지 않았지만 외부 스타일 시트 수를 두 배로 늘린 후에 충돌이 발생했습니다. 올바른 코드 예제는 다음과 같습니다.

@import 'stylesheetB.css';

그래서 Nitram이 언급했듯이 디자인을 하드 코딩하는 동안 좋은 정신지도를 갖는 것이 유용하다는 것을 알았습니다. Godspeed. 그리고 나는 영어 문법 실수가 있다면 용서합니다.

가져온 모든 CSS 파일을 개별적으로로드하고 사이트 속도를 크게 저하시킬 수 있으므로 @import를 사용할 이유가 거의 없습니다. CSS를 처리하는 최적의 방법에 관심이 있다면 (페이지 속도와 관련하여) 모든 CSS 코드를 처리해야 합니다.

모든 CSS 파일을 열고 모든 단일 파일의 코드를 복사하십시오.
페이지의 HTML 헤더에있는 단일 STYLE 태그 사이에 모든 코드를 붙여 넣기
코드가 많거나 특정 요구가없는 한 CSS @import 또는 별도의 CSS 파일을 사용하여 CSS를 제공하지 마십시오.

자세한 내용은 여기 : http://www.giftofspeed.com/optimize-css-delivery/

위의 작업이 가장 잘 작동하는 이유는 브라우저에서 처리해야 할 요청이 적고 별도의 파일을 다운로드하는 대신 CSS 렌더링을 즉시 시작할 수 있기 때문입니다.

이것은 PHP 개발자를 도울 수 있습니다. 아래 함수는 공백을 제거하고 주석을 제거하며 모든 CSS 파일을 연결합니다. 그런 다음 <style>페이지를로드하기 전에 헤드 의 태그에 삽입 하십시오.

아래 함수는 주석을 제거하고 CSS로 전달 된 내용을 최소화합니다. 다음 기능과 함께 페어링됩니다.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

이 기능을 문서 헤드에서 호출합니다.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

concatenateCSS()문서 헤드에 기능 을 포함 시키 십시오. 경로가 IE 인 스타일 시트의 이름을 가진 배열을 전달하십시오 css/styles.css. .css위 기능에서 자동으로 추가되므로 확장을 추가하지 않아도됩니다 .

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>

참고 URL : https://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import

'Programing' 카테고리의 다른 글

모바일 레이아웃에서 Bootstrap 3 열 순서를 어떻게 변경합니까? (0)	2020.03.26
변수 값에서 팬더 DataFrame을 생성하면 "ValueError : 모든 스칼라 값을 사용하는 경우 인덱스를 전달해야합니다"가 발생합니다. (0)	2020.03.26
JavaScript에서 배열을 함수 매개 변수로 전달 (0)	2020.03.26
Express를 사용하여 NodeJS 서버에서 파일 다운로드 (0)	2020.03.26
bower (및 npm) 버전 구문은 무엇입니까? (0)	2020.03.26

현재글CSS를 포함하는 가장 좋은 방법은?

복권의 역사, 로또 정보와 IT 기술 등을 다루는 블로그입니다.

볼거리, c++, 무비순위, 관광, c#, 행사, 놀거리, spring, 자바, 극장순위, 여행, JQuery, Spring3, Javascript, 축제, 연극, 가족나들이, 뮤지컬, 공연, java,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

lottogame

CSS를 포함하는 가장 좋은 방법은?

CSS를 포함하는 가장 좋은 방법은? @import를 사용해야하는 이유

1. 다른 스타일 시트에 의존하는 스타일 시트가 필요하면 @import를 사용하십시오. 별도의 단계에서 최적화를 수행하십시오.

2. 사이트를 확장해야 할 시점에 도달하면 모든 CSS를 연결하십시오.

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

CSS를 포함하는 가장 좋은 방법은?

CSS를 포함하는 가장 좋은 방법은? @import를 사용해야하는 이유

1. 다른 스타일 시트에 의존하는 스타일 시트가 필요하면 @import를 사용하십시오. 별도의 단계에서 최적화를 수행하십시오.

2. 사이트를 확장해야 할 시점에 도달하면 모든 CSS를 연결하십시오.

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바