저는 CSS 전문가가 아니라 웹 개발자입니다. 우리는 최근 Angular를 사용하기 시작했고 Angular 템플릿에 스타일을 적용하는 것이 가장 좋습니다. 우리가 해왔 던 논의는 외부 CSS 파일 또는 내부 스타일 태그를 사용할지 여부입니다. 우리는 너무 많은 템플릿이 없으며 각 템플릿은 대부분 고유 한 스타일을 가지고 있습니다. 우리는 외부 CSS 파일 및/또는 내부 스타일 사이에서 토론하고 있습니다. Couls 누군가이 주제에 대한 전문가 의견을 제공합니다.CSS 스타일을 사용하는 각도 1.x 템플릿 - 모범 사례
내부 스타일은 해당 스타일이 포함 된 페이지에만 적용됩니다. 따라서 여러 페이지에서 일반적인 스타일 (예 : 메뉴)을 업데이트하려면 각 페이지을 개별적으로 업데이트해야합니다.
특정 스타일을 두 페이지 이상에 공통적으로 적용해야한다는 것을 고려하면 은 분명히으로 외부 스타일 시트를 선택하려고합니다. 이렇게하면 페이지 A와 B가 모두 style.css 또는 유사한 파일의 스타일을 상속 할 수 있습니다.
<link href="style.css" rel="stylesheet">
을 그리고 여러 페이지의 스타일을 업데이트 할 경우에만 style.css를 업데이트 할 수 있습니다
이 방법을 사용하면 각 페이지의 <head>에서 단 한 줄의 코드와 관련된 모든 스타일을로드 할 수 있습니다.
글쎄, 나는이 스타일의 대부분이 그들의 템플릿에 고유하게 될 것이라고 말했다. 그러나 확실히, 일반적인 것들은 글로벌 CSS 파일에 들어갈 것입니다. 우리가 내부 CSS를 전혀 사용하지 않아야하는지에 대한 논의가있었습니다. 개인적으로 하나의 템플릿에서만 사용되는 스타일이 글로벌 CSS에 포함되어야한다고 확신하지 못합니다. – ASon
하나의 CSS 파일 만 사용하는 것이 좋습니다. 이와 같은 경우에는보기, 컨트롤러 및 관련 스타일을 하나의 격리 된 폴더에 보관하는 것이 좋습니다. 컴파일러를 사용하여 각기 다른 CSS 파일을 하나의 전역 CSS 파일로 다시 컴파일합니다. 이렇게하면 CSS 파일을 코드 구조에서 쉽게 '분리'할 수 있습니다. –
Angular는 v1.5의 범위가 지정된 CSS를 가져옵니다 (구성 요소가 도입되었을 때 - 믿습니다). 좋은 개념이지만 중소 규모의 앱에서는 그 차이가 거의 눈에 띄지 않습니다. Scoped CSS를 최대한 활용하는 방법 (즉, Webpack)을 알고있는 도구와 함께 scoped CSS를 사용해야합니다.
Webpack을 사용하지 않는 경우 하나의 큰 스타일 시트 인 고전적인 모델을 고수하십시오.
당신이 (FOUC없이 빠른 로딩 시간) 최상의 경험을 제공하려는 경우 기술적 관계없이 스택, 인라인 위의 모든 스크롤없이 볼 수있는 일반 레이아웃 - 보내고 스타일을 데려 가고 싶다는 주, 바람직하게는 머리 <style> 태그와 비동기 적으로로드 된 스타일 시트 안의 다른 모든 태그를 사용하십시오.
this article에 CSS 비동기로드에 대해 읽으십시오.
파일을 사용하십시오. 그것들을 많이 가지고 빌드 프로세스를 사용하여 하나의 파일로 통합하고 축소 할 수 있습니다. – charlietfl