HTML5 상용구 대 HTML5 재설정

HTML5 상용구 대 HTML5 재설정

---

안녕하세요. HTML5 Boilerplate 및 HTML5 Reset 은 최신 모범 사례가 많이 내장 된 두 개의 HTML, CSS 및 JavaScript 템플릿입니다. 그들의 목표는 거의 동일합니다.

• 빠르고 강력하며 현대적인 웹 개발
• HTML5 (duh!)
• 브라우저 간 정규화 (IE6 및 모바일 브라우저 지원 포함)
• 점진적 향상 및 우아한 저하
• 성능 최적화
• 프레임 워크가 아니라 다음 프로젝트의 시작점

분명히 그들은 기능면에서 매우 유사합니다. 구현 방식이 어떻게 다른가요 (예를 들어, 다른 기술을 사용하여 IE 특정 CSS 수정을 달성 할 수 있음)? 범위가 전혀 다른가요? HTML5 Boilerplate가 약간 더 큰 것 (빌드 도구, 서버 구성 등) 인 것처럼 보이지만 사람들이 보게 될 실제 사이트에 관해서는 HTML5 재설정을 넘어서는 위치를 알기가 어렵습니다.

---

일반적으로 두 프로젝트는 웹 프로젝트에서 작업하는 개발자에게 견고한 출발점을 제공하기 위해 시작되었습니다. 둘 다 많은 개발자가 각 프로젝트를 위해 재창조하는 지루하고 오류가 발생하기 쉬운 많은 상용구를 제거합니다. 그들이 어떻게 진행하는지에 대한 세부 사항은 약간 다르지만 대부분의 경우 동일한 결과를 얻습니다.

앞서 언급했듯이 HTML5Boilerplate는 개발자가 먼 미래의 만료 헤더 등과 같은 서버 측 항목의 측면에서 페이지 속도를 높이기 위해 모범 사례를 따를 수 있도록 몇 가지 빌드 스크립트 부분을 추가했습니다. HTML5Reset 프로젝트는 의미론, 콘텐츠 및 스타일에 더 중점을 둡니다. 예를 들어, HTML5Reset은 HTML5의 페이지 콘텐츠에 대한 더 많은 예제 구조를 가지고 있지만 (사람들에게 새로운 요소를 사용하는 방법을 보여주기 위해) HTML5Boilerplate는 그렇지 않습니다.

HTML5Boilerplate에 포함 된 응답 시간 및 페이지 속도 부분은 더 많은 사용자가 모바일 플랫폼에서 자신을 발견하고 Google이 페이지 응답 시간이 페이지 순위에 미치는 영향을 증가시키면서 점점 더 중요 해지고 있습니다. 페이지 응답 시간의 작은 증가가 사이트 사용 및 인식 방식에 측정 가능한 부정적인 영향을 미친다는 많은 논문이 있습니다 ( 특히 전자 상거래 설정에서 ... 종종 100ms 느린 페이지는 판매 비율이 낮아집니다).

CSS 전면에서 두 프로젝트에 대한 대부분의 재설정 스타일 섹션은 기준선이 설정된 것에 약간의 차이가 있지만 매우 동일합니다. 그러나 IE 특정 수정 사항은 대체로 동일합니다. HTML5Boilerplate는 IE가 양식 요소 (예 : 확인란 / 라디오 버튼 및 유효 / 잘못된 상태)와 같은 스타일을 지정하는 방식에 대해 HTML5Reset보다 약간 더 많은 제어를 주장합니다.

HTML5Boilerplate에서 다루고있는 두 가지 주요 CSS 영역은 HTML5Reset이 사이트에 더 쉽게 접근 할 수 있도록 지원하는 일반적인 도우미 클래스 (예 : .hidden및 .visuallyhidden)뿐만 아니라 브라우저에서 인쇄를 더 유사하게 만드는 인쇄 스타일에 대한 몇 가지 실질적인 조정입니다. 배경 이미지를 투명하게 만들고 (토너를 낭비하지 않기 위해), 링크에 실제 URL을 추가하고 약어에 제목을 추가하는 것과 같은 비용 절감 및 접근성을 제공합니다.

유사점과 차이점 (및 그 뒤에있는 이유)이 매우 유익하고 어떤 부분을 더 잘 결정하는 데 도움이 되었기 때문에 두 프로젝트의 정보와 두 프로젝트의 작업 방식을 나란히 비교하여 읽는 것이 좋습니다. 내가 사용하고 싶었던 각각의.

궁극적으로 모든 "라이브러리"종류의 프로젝트와 마찬가지로 개발자는 현재 수행중인 작업을 이해해야하며 프로젝트의 특정 요구 사항을 충족하기 위해 기준선을 조정해야합니다.

---

둘 중 하나를 사용할 수 있습니다.

@murtaugh가 말했듯이 (http://5by5.tv/bigwebshow/45) Reset으로 처음 시작할 때 아무것도 배울 필요가 없습니다. 내 경험상 R & D 부서에서 일하면서 데모를하거나 빠른 반복 작업을 수행해야 할 때 재설정 (또는 이미 알고있는 경우 보일러)을 사용할 수 있습니다. 배포 용 제품을 빌드해야 할 때 더 많은 것이 있기 때문에 Boiler로 전환합니다. 나를 위해 작동하지만 지금은 둘 다 쉽게 사용할 수 있다는 것을 알고 있기 때문에.

---

실제로 전통적인 reset.css를 사용하는 것이 가장 좋다고 거의 말하고 싶습니다. 모바일 앱에서 호환성에 문제가 없습니다. 그러나 저는 jQuery 모바일 프레임 워크를 사용하여 이러한 앱을 개발하고 있습니다.

그래서 나는 당신이 어떤 종류의 도구를 사용하고 있는지에 대한 조건부라고 생각합니다. Phonegap은 내 코드를 모든 OS로 컴파일하는 데 문제가없는 것 같습니다. 그리고 에뮬레이터에서 내 소스 코드를 보는 것은 완벽하게 보입니다.

그래서 나는 당신이 polyfill을 달성하려고하지 않는 한 상용구의 요점을 보지 못합니다.

---

저는 이전 개발자들이 JQuery 와 Prototype 을 모두 사용하도록 회사를 묶어 놓은 환경에서 일하고 있습니다. 호환성 모드에서 벗어나야 할뿐만 아니라 그로 인해 발생하는 추가 오버 헤드를 생각해야합니다. 디버깅 할 때 Prototype은 Firebug에서 디버그 메시지를 "도용"하여 더 많은 작업을 수행합니다. 그리고 미친 부분은 몇 달 동안이 문제를 해결 해왔고 이제 막 끝장 나가기 시작했다는 것입니다. 그리고 Prototype에서 플러그를 뽑으려고 할 때 항상 다른 것을 찾는 것 같습니다. 그것에 의존하는 섹션 ...

이런 이유로 저는 비슷한 목적을 가진 프레임 워크의 조합에 대해 매번 반대합니다. 예를 들어, YUI Grids 가 아무리 멋지다고 생각 하더라도 전체 YUI 프레임 워크 를 로드하는 경우 Jquery, Moo 또는 Prototype을 수행하지 않는 것이 가장 좋습니다 . 당신은 불필요하게 수렁에 빠질 것입니다. 로드 시간 ( 사용자 경험 을 망친다) 을 없애고 개발자에게 골칫거리와 불필요한 작업을 제공합니다.

기초 구축과 같은 사이트의이 단계를 살펴보십시오. 당신은 당신이 사용하고 싶은 것을 사용할 수있는 기회가 있지만, 말하자면 "구석에 자신을 칠하지"않도록주의해야합니다. 따라서 리소스를 기반으로 사용할 수있는 특수 제작 된 동급 최고의 도구를 사용하십시오. 귀엽기 위해 무언가를 사용하지 마십시오! 매우 높은 품질의 도구가 무료로 제공된다는 점에서 운이 좋기 때문에 선택할 수 있습니다. 그러나 당신이 미래를 위해 당신의 사이트의 방향을 이끌고 있다는 것과 당신의 결정이 급히 내려지면 그 결과를 처리해야하는 저와 같은 사람 일 수도 있습니다.

따라서 다른 프레임 워크를 절대 사용하지 않는 한, 저는 재설정을지지합니다 ... 또는 최고 품질 표준을 준수하는 CSS를 수행합니다.

참조 URL : https://stackoverflow.com/questions/5719424/html5-boilerplate-vs-html5-reset