단일 CSS 스타일 시트 또는 섹션 당 하나의 스타일 시트?

Question

저는 HTML5/CSS3에서 대부분 완성 된 웹 사이트 (또는 약간의 웹 사이트)에서 약간의 기능을 위해 약간의 PHP를 던집니다.

페이지마다 호출되는 단일 스타일 시트에 모든 CSS가 있거나 코드의 전단 크기로 인해 각 섹션에 고유 한 외부 스타일 시트가있는 것은 올바른 습관입니까? (내 탐색 모음과 꼬리말 사이에서만 1500-2000 줄의 코드가 가능합니다.)

코드 청결도와 둘 이상의 스타일 시트에 대한 "통화 수"와 같은 이점이있을 수 있습니다. 그 중 하나가 다른 것보다 더 많이 사용되는 기술적 인 이유가 있습니까? 내 목표는 다양한 장치로 빠르고 쉽게 액세스 할 수 있도록 가장 작은 풋 프린트로 최상의 웹 사이트를 만드는 것입니다. 그것은 매우 사용자 집중적 인 또는 프로세스 무거운되지 않습니다.

Answer 1

태그 대문자 사용에 대한 이유는 왜 경향이 대문자에서 소문자로 이동했는지 이해하는 데 도움이 될 수 있습니다. HTML4 요소는 일반적으로 W3School에 따라 대문자로 작성되었지만 W3C recommended they be written in lowercase (참조를 찾을 수는 없지만). 그렇다면 XHTML이 대중화되었습니다. 그러나 the specification stipulated elements and attributes must be lowercase. 그리고 HTML5 specification says you can go either way, but lowercase is recommended.

내부 및 외부 CSS에 대해서는 실제로 다릅니다. 여러 페이지가 동일한 CSS 인 then the browser will likely cache it에 액세스하는 경우 모든 CSS를 별도의 파일로 저장하는 것이 좋습니다. 나는 코드 추상화를 위해서도 이것을 좋아한다. 단 하나의 페이지 인 경우 인라인으로 갈 수도 있습니다.

탐색 표시 줄에 대해서는 선호 사항입니다. 템플릿 파일을로드하고 DOM을 통해 실행하고 필요한 요소를 삽입하는 것을 좋아합니다. 성능 향상을 위해 다른 방법을 선택할 수도 있지만 코드 추상화에는이 방법이 좋습니다. 다음과 같은

뭔가 : 물론

<?php 

class Webpage { 

    private $document; 

    function __construct() { 
     $this->document = new DOMDocument(); 

     if($this->document->loadHTMLFile("template.html")){ 
      $this->createHeaderMenu(); 
     }else{ 
      trigger_error("Webpage->__construct() failed to load template.html", LOG_ERR); 
     } 
    } 

    protected function createHeaderMenu() { 
     $headerMenu = $this->document->getElementById("header-menu"); 

     $li = $this->document->createElement("li"); 
     $a = $this->document->createElement("a", "Homepage"); 
     $a->setAttribute("href", "/"); 
     $a->setAttribute("target", "_self"); 
     $a->setAttribute("title", "Homepage"); 
     $li->appendChild($a); 
     $headerMenu->appendChild($li); 
    } 

    public function output() { 
     return (string) $this->document->saveHTML(); 
    } 

} 

$page = new Webpage(); 
echo($page->output()); 

?> 

는 template.html는 템플릿이 될 것이며, 헤더 메뉴를 설정 id 속성과 거기에 UL 요소가있을 필요가있다.

Answer 2

간단히 말해, 귀하와 정확한 사이트의 책임입니다. 귀하의 우려 사항에 대한 몇 가지 답변 :

1. 소문자. 대문자는 약간 오래된 학교 다. 브라우저는 별다른 차이가 없다.
2. 가능한 경우 HTTP 요청을 줄입니다. 하나의 CSS가 더 나은 경우가 많지만 실제로는 다릅니다. http://www.webpagetest.org
3. 사용 PHP includes.

Answer 3

와 시간은 두 가지 Rcih가 특정 프로그래밍 대회 또는 (HTML의 경우) 오히려 에티켓을 선택하는 당신까지 정말 제안한 것처럼 그리고 그것은 또한 정말 실제 위치에 따라 달라집니다 너는 노력하고있어.

중요 부분은 다른 프로그래밍 언어와 마찬가지로 HTML로 작성된 코드가 나중에 또는 다른 팀 구성원 (있는 경우)이 언제든지 쉽게 이해하고 이해할 수 있어야한다는 것입니다 .

CSS에 관한 한 ... 웹 사이트의 대부분의 페이지에서 동일한 스타일을 사용하려는 경우 페이지에 링크 할 수있는 하나의 CSS 파일이 있어야합니다. 페이지의 다른 부분에 대해 서로 다른 스타일과 버스트 스타일을 계획하는 경우 다른 방법을 사용하는 것이 현명합니다. "각 섹션에 고유 한 외부 스타일 시트가 있어야 함"방법론이 필요할 수 있습니다.