Josh Comeau의 사용자 정의 CSS 재설정에 대한 메모

최근에, 우리는 Elad Shechter의 새로운 CSS 재설정에 대해 논의했으며, 주제에 대한 Josh Comeau의 통찰력있는 블로그 게시물이 이어졌습니다. 이것은 CSS 재설정 환경의 변화를 나타냅니다. 과거의 중요한 브라우저 스타일 차이는 덜 널리 퍼져 있으며, 프로젝트 스타일이 진행될 때마다 많은 기본 스타일이 무시됩니다. 따라서 "현대"CSS 재설정은 새로운 프로젝트에 실질적인 이점을 제공하는 선별 된 기본 스타일 컬렉션으로 발전하고 있습니다.

Josh의 접근 방식을 살펴보면, 본질적으로 설계 중심이 아닌 스타일의 편집은 일반적으로 원하는 프로젝트 기능을 제공하여 설계를 지원합니다. 논평으로 그의 선택을 분석합시다.

 *, *:: 이전, *:: 이후 {
  박스 사이징 : 국경 박스;
}

널리 받아 들여지는 연습. 그리드 및 Flexbox 레이아웃의 사용이 증가함에 따라 유틸리티가 약간 감소 할 수 있지만 일관된 크기에 대한 선호되는 접근 방식으로 남아 있습니다. 이상적으로는 CSS 재설정은 부품 레벨에서 더 쉽게 재정의되도록 상속을 활용해야합니다.

 * {
  여백 : 0;
}

기본 마진을 제거하는 간결한 방법. 일부 상황에서는 잠재적으로 손을 대고 있지만 명백한 마진 선언을 강화하여 명확성을 향상시킵니다. 이것을 padding: 0; 기본 목록 항목 패딩을 처리합니다.

 html, body {
  높이 : 100%;
}

백분율 기반 높이가 올바르게 작동하도록하는 유용한 전략으로 예기치 않은 배경 동작을 방지합니다. body { height: 100vh; } 충분 해 보일 수 있으며 iOS 사파리 퀴크로 인해 동일한 신뢰성이 부족합니다.

 몸 {
  라인 높이 : 1.5;
  -webkit-font-smoothing : antialiased;
}

-webkit-font-smoothing 속성은 지나치게 얇은 타이포그래피로 이어질 수 있습니다. 귀중한 도구이지만 글로벌 애플리케이션이 항상 이상적인 것은 아닙니다. html 선택기를 통한 글로벌 타이포 그래피 크기 관리 미디어 쿼리로 루트 글꼴 크기를 조정하면 더 많은 제어 기능이 제공됩니다. 1.5의 라인 높이는 합리적인 기본값이지만 일부는 1.4에 가까운 값이 선호 될 수 있습니다. 그러나 제목 조정이 자주 필요합니다. 조쉬의 영리한 대안 :

 * {
  라인 높이 : calc (1em 0.5rem);
}

이는 글꼴 크기에 따라 선 높이를 동적으로 조정하여 확장 가능한 솔루션을 제공합니다. 최적의 라인 높이 계산에 대한 Jesús Ricarte의 작업에서 영감을 얻은이 기술은 탐구 할 가치가 있습니다.

 IMG, 사진, 비디오, 캔버스, SVG {
  디스플레이 : 블록;
  최대 전역 : 100%;
}

견고한 포함. display: block; 라인 높이 문제를 제거하고 max-width: 100%; 미디어 요소가 컨테이너가 넘치지 않도록합니다. 포함하는 동안<picture></picture> 논쟁의 여지가 있습니다<iframe></iframe> 그리고<object></object> 완전성을 향상시킬 것입니다.

 P, H1, H2, H3, H4, H5, H6 {
  오버 플로우 랩 : 브레이크 워드;
}

긴 단어 (URL과 같은)가 레이아웃을 방해하는 것을 방지하는 데 필수적입니다. .text-content 와 같은 더 넓은 선택기에이를 적용하면 계단식이 허용되지만 특정 요소를 타겟팅 할 수 있습니다. 추가 고려하십시오<li> ,,,<dl></dl> ,,,<dt></dt> , 그리고<blockquote></blockquote> 포괄적 인 라인 포장. 라인 포기 특성의 최적 조합은 지속적인 논의의 주제로 남아 있습니다.

 #Root, #__next {
  격리 : 분리;
}

이 반응/next.js 특정 스 니펫은 스태킹 컨텍스트를 만듭니다. 정확한 이점은 즉시 명백하지는 않지만 명백한 문제를 일으키지는 않습니다.

전반적으로 Josh의 재설정은 잘 고려 된 접근 방식입니다. 다른 CSS 재설정 전략을 조사하고 비교하는 것이 항상 유익합니다.

위 내용은 Josh Comeau의 사용자 정의 CSS 재설정에 대한 메모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!