CSS/JavaScript 외부 파일을 주문하는 가장 좋은 방법은 다음과 같습니다.

Question

CSS 외부 파일을 포함시키는 가장 좋은 방법은 무엇입니까? 일반에서 특정 또는 그 반대?

는 더 정확하게 레일 3.1 기본 application.css (NO 말대꾸)가 포함되어 생성 :

/* 
*= require_self 
*= require_tree . 
*/ 

내가 예를 들어 jQuery를 UI 테마를 추가 할 경우 일반적으로 특정에서 이동 그래서 내 생각은 가장은 다음과 같습니다

/* 
*= require_self 
*= require_tree . 
*= require jquery-ui/smoothness/jquery-ui-1.8.16.custom.css 
*/ 

대신 :

/* 
*= require jquery-ui/smoothness/jquery-ui-1.8.16.custom.css 
*= require_self 
*= require_tree . 
*/ 

나는이 questio을 물어 왜냐하면 나는 C++에서 예를 들어 가장 구체적인 것으로부터 가장 일반적인 것에 이르기를 권고한다.

같은 질문의 .js가 기본 레일에 의해, 포함 (더 커피 스크립트)를 생성하지 않습니다 의미 : 일반의 특정에 :

여기

//= require jquery 
//= require jquery_ujs 
//= require_tree . 

이 반대를 갈 것으로 보인다.

레일 devs는 목적에 따라 기본 정렬을 선택 했습니까? 아니면 무작위입니까? vue의 기술적 인 관점에서 바람직한 방법이 없다면 일반적으로 사용되는 규칙은 무엇입니까?

Answer 1

CSS는 먼저 일반 규칙과 더 구체적인 규칙에 포함되어야합니다. 이렇게하면 명시 적으로 CSS specificity을 관리하지 않고도보다 구체적인 규칙이 일반 규칙을 항상 무시할 수 있습니다 (원하는 경우). 이 두 CSS 규칙이 있다면

그래서 :

// general rule 
.subitem {color: blue;} 

// more specific rule 
.currentitem {color: red;} 

를, 당신은 다음과 같은 HTML을했다 : 당신은 .currentItem에 대한보다 구체적인 규칙이 온 있는지 확인하려면 것

<ul> 
    <li class="subitem">Item</li> 
    <li class="subitem currentitem">Item</li> 
    <li class="subitem">Item</li> 
    <li class="subitem">Item</li> 
</ul> 

.subitem에 대한보다 일반적인 규칙 이후에 .currentitem 규칙이 원할 때 적용됩니다.

자바 스크립트 파일은 적절한 종속성 순서로 포함되어야합니다. 예를 들어 파일 A의 함수를 초기화 코드로 사용하는 자바 스크립트 파일 B가있는 경우 파일 B 앞에 파일 A가 있어야합니다. 두 개의 javascript 파일에 초기화 종속성이없는 경우 (예 : 서로 함수를 호출하지 않음) 초기화), 그들은 어떤 순서로도 될 수 있습니다.

참고로 자바 스크립트 파일의 경우 전역 네임 스페이스 또는 특정 네임 스페이스의 함수가 여러 파일에 같은 이름으로 존재하지 않아야합니다. 그렇다면, 마지막에 포함 된 것이 적용됩니다. 일반적으로이 동작에 의존해서는 안되지만 충돌하는 함수를 같은 이름으로 제거해야합니다.

Answer 2

CSS 측면에서 추가해야 할 점 중 하나는 주문에 의존하지 않고 .subitem.currentitem을 수행하여 특수성을 강화해야한다는 것입니다. CSS의 종류는 다음과 같습니다.

큰 응용 프로그램에서는 순서에 따라 까다로울 수 있습니다.

또한 JS의 경우 순서가 두 번 이상 정의 된 경우 식별자에 할당 된 순서에 영향을줍니다.

@import "myCSSfile.css"; 

는 HTML에서 CSS를 포함 :

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

자바 스크립트에서 CSS를 포함 :

Answer 3

는 CSS 파일에서 CSS를 포함

document.getElementByTagName('head')[0].innerHTML += 
    '<link href="myCSSfile.css" rel="stylesheet" type="text/css">';