js, html 및 css를 별도로 분리해야합니까?

10

js , html 및 css를 분리 하여 유지하는 것이 항상 깨끗하다고 들었습니다 . 아마도 유지 관리, 디버그가 더 쉬워집니다. 아마도 css 와 js 파일을 캐싱 / 축소 할 수 있기 때문에 더 효율적 입니다.

내가 아는 한 웹 프레임 워크 (Django, Rails, ...), 자바 스크립트 템플릿 라이브러리를 사용하여 ... 단일 HTML 페이지를 여러 개의 재사용 가능한 템플릿으로 나누는 경향이 있습니다. 원하는 경우 일종의 위젯 . 예를 들어 뉴스 피드 위젯, 여러 위젯 선택 등을 할 수 있습니다 ... 각기 다른 페이지에서 일관된 레이아웃을 가지며 각각 자바 스크립트로 제어됩니다.

이 조직을 사용하면 최대한 깨끗하고 재사용 성이 극대화되는 것처럼 모든 js 와 cs 를 별도의 파일 로 유지하는 것이 더 간단한 이유를 이해하는 데 어려움이 있습니다 . 나는 그것이 예를 들어 훨씬 간단하다고 생각합니다 .

에서 선택 여러 위젯 파일

html
기본 CSS 레이아웃
약간의 JS로 직접 상호 작용 및 UX 향상 제어.

뚱뚱한 js 파일 을 스크롤 한 다음 뚱뚱한 CSS 파일로 전환 하고 스크롤 할 필요가 없으므로 html 파일로 다시 전환 할 필요가 없기 때문에 더 재사용 가능하고 유지 관리가 쉽다고 생각 합니다 ... .

따라서 일반적으로 권장되는 분리를 고수하면 코드를 구성하는 방법을 알고 싶습니다.

그렇게해야 할 좋은 이유가 있습니까?
웹 가이드가 일반적으로 멋진 도구를 사용하지 않는다고 가정하지 않습니까 (이 경우 모범 사례를 위해 최신 온라인 독서를 원합니다)?
그것은 단지 선호의 문제입니까?

web-development

— sebpiq
소스

2

당신이 암시하는 원리 는 프레젠테이션 및 컨텐츠 분리

— Robert Harvey

8

파일로 분리하지 않으면 사용자는 한 번 다운로드하여 캐싱하는 대신 모든 페이지로드에 포함 된 HTML 및 CSS를 다운로드하게됩니다.

— Nicole

@RobertHarvey : ok good reference ... 그러나 분리 내용 / 표현에 대해 나열된 유일한 이유는 기계의 가독성을 향상시키는 것입니다. 그러나 JS를 사용하여 페이지에 위젯을 추가하면 문제가되지 않습니다. 기본 HTML에는 어쨌든 포함되어 있지 않습니다!?

— sebpiq

1

@Renesis : 그것은 큰 단점입니다. 그러나 ... 예를 들어 Django의 경우 여러 템플릿에서 js와 CSS를 수집하고 단일 파일로 병합하는 것이 매우 쉽습니다.

— sebpiq

2

즉, 프리젠 테이션 (예 : CSS)을 조정하여 각 페이지를 처음부터 직접 작성할 필요없이 일반 웹 페이지, 모바일 웹 페이지 및 인쇄 가능한 페이지를 제공 할 수 있습니다.

— Robert Harvey

5

나는이 구조를 유지한다

각 페이지 또는 컨트롤마다 html 페이지 (또는 aspx 또는 php 등)의 폴더를 제공합니다. 해당 폴더에는 js, xml, images 및 css 파일 용 폴더도 있습니다. 공유 리소스가 아닌 페이지 / 컨트롤 전용입니다.

사이트 루트에는 js, xml, images 및 css 폴더도 있으며 각 폴더에는 사이트 전체 리소스가 포함되어 있습니다.

사이트 전체 js 및 css 파일은 서버 측에서 롤업되어 단일 js 파일로 리턴됩니다. 일반적으로 페이지 당 하나만 있기 때문에 페이지 특정 페이지는 그대로 남아 있습니다.

이것은 내 자원을 범위에 따라 구성합니다. 그리고 루트 js 폴더에 12 개의 js 파일이있을 수 있지만 서버 측을 결합하고 축소하여 결과를 캐싱하여 하나의 js 리소스로 반환됩니다.

또한 pagey에있을 때 pagex에 특정한 리소스를로드하지 않습니다. 유일한 "폐기물"은 사이트 전체 리소스 파일에있을 수 있지만 캐시되어 많은 리소스가 여러 곳에서 사용되므로 더 효율적입니다.

— CaffGeek
소스

1

좋은 소리! 파일을 별도의 폴더로 그룹화하고 서비스를 위해 수집하는 것을 생각하지 않았습니다! 캡슐화를 허용하면서 캐싱, SoC 등의 모든 문제를 해결합니다. 대단해!

— sebpiq

2

일반적으로 컨벤션은 컨텐츠, 프리젠 테이션 및 동작의 분리를 유지하기 위해 JS / CSS / HTML에 대한 별도의 파일을 갖는 것입니다. 그러나 속도가 문제가되면 아무 문제가 없습니다.

— 리탈
소스

별도의 파일은 실제로 그것을 분해 후 오히려 속도를 향상 : \

— Raynos

HTML 파일에서 적은 양의 CSS와 JS는 세 페이지 요청 대신 한 페이지 요청이므로 많은 페이지를 매우 빠르게 제공하는 것이 좋습니다. - 또는 적어도 것은 필요에 따라 결합 code.google.com/speed/page-speed/docs/rtt.html

— Bratch

1

여러 위젯 선택 파일에서

html
기본 CSS 레이아웃
약간의 JS로 직접 상호 작용 및 UX 향상 제어.

나는 그것을 촉진시키는 조직 도구 ( 삼위 일체 )를 가지고 있습니다.

위젯 파일은 HTML, CSS 및 JS의 3 개의 작은 파일로 분할됩니다. 이것은 별도의 파일이 있지만 여전히 링크되어 있음을 의미합니다.

이것은 뚱뚱한 파일의 문제를 피하지만 여전히 별도의 파일을 제공합니다.

따라서 단순히 문제를 분리한다고해서 큰 HTML / CSS / JS 파일 이 있어야한다는 의미는 아닙니다 . <HTML, CSS, JS>재사용 가능한 모든 캡슐화 된 코드 에 대해 여러 개의 트리플렛이 있어야 합니다.

이제 명확하게 분리되어있는 한이 파일들을 모두 하나의 파일에 보관하는 데 아무런 문제가 없습니다.

이렇게 보이는 위젯

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

훌륭하고 훌륭합니다. 한 파일에 모든 것을 넣지 않으면 관리자가 CSS / JS / HTML을 혼합하고 일치시키기가 너무 쉽습니다.

시간이 지남에 따라 스파게티로 변하기에는 너무 쉽습니다.

사람들이 별도의 파일을 홍보하는 주된 이유는 두 가지입니다.

별도의 다운로드. css / js 코드를 복사하여 여러 "위젯"에 붙여 넣으면 자체 파일로 팩토링해야합니다.
css / js / html을 하나의 파일로 깔끔하게 분리하기 위해 저자에게 의존하지 않음으로써 스파게티 코드를 적극적으로 예방

— 레이 노스
소스

네 ... 차드와 같은 제안! 그리고 실제로 나는 그것을 즉시 시도했고, 나는 팔렸다 :) 이것은 매우 깨끗합니다 ... 당신의 도구는 노드를위한 것입니까? 나는 장고와 같은 것을 찾아야한다.

— sebpiq

@ sebpiq 노드 용이지만 클라이언트로 포팅 중입니다. 또한 알파이며 클라이언트 / 서버 코드 재사용을 포함하여 전체 HTML / CSS / JS 조직 플랫폼으로 만들기 위해 많은 노력을 기울이고 있습니다. 나는 개인적으로 당신이 다른 플랫폼에서 이와 같은 것을 발견 할 것이라고 의심합니다. o /

— Raynos

1

웹 사이트를보다 쉽게 관리 할 수 있도록 html, css 및 js를 분리하는 것이 좋습니다.

시작할 때 기본 index.html과 단일 styles.css 파일 만있을 수 있지만 웹 사이트가 커질수록 개별 구성 요소 또는 종점.

분리 사용 :

별도의 JavaScript를 다른 페이지에서 재사용 할 수 있음
별도의 CSS를 사용하면 재사용과 함께 사이트를 새로운 모습으로 쉽게 볼 수 있습니다.
별도의 HTML은 보이지 않는 내용에 초점을 맞출 수 있습니다.

또한 사이트의 여러 페이지에서 사용되는 경우 CSS / JS가 캐시 될 수 있음을 언급해야합니다.

— 어제이고 힐
소스

... (배포되지 않은) 개별 파일에서 JS 및 CSS 자산을 수집하여 배치 된 실제 파일 을 생성 할 수있는 많은 "빌드 도구"가 있습니다 . 자산 수집, 중복 제거 (또는 감지), 축소 및 축소 곧.

— 마이크 로빈슨