본문으로 건너뛰기
黯羽轻扬매일 조금씩

normalize、reset 와 base

무료2016-08-13#CSS#css分层#css模块化#base common page

reset? normalize? 필요한가? 필요하지 않은가?

서문에

어느 이야기:

normalize 를 알고 있습니까? reset 과의 차이는 무엇입니까?

면접관이 묻고, 저는 엉터리로 말했습니다 (당시 확실히 몰랐지만, 2 개 단어의 글자면 의미는実は매우 명확했습니다)

一.reset

reset: 리셋, 제로 클리어

가장 난폭한 방법:

* {padding:0; margin:0;}

모든 태그를 모두 벗깁니다. body, h1-h6, div, article 등 원래 각각 다른 많은 태그가, 이제는一模一样이 되고, 이름만이 마지막 존엄으로서 남습니다

물론, 조금 더 온화한 (더 긴) 것도 있습니다:

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,ul{margin:0; padding:0;}

온화한 reset 의 원칙은: 제거할 필요가 있는 것만 제거하는 것입니다. 예를 들어 div 는 원래 아무것도 입고 있지 않은데, 더욱 벗겨지는 것은, 이는 비인도적입니다

reset 을 포함한 스타일 구조는 다음과 같을 수 있습니다:

reset.css   // 모든 디폴트 스타일을 삭제
common.css  // 프로젝트에서 유지하는 공통 스타일
page.css    // 업무에 필요한 스타일 (재이용 불가)

순서대로 도입하고, 아래의 것으로 위의 것을 오버라이트합니다. 따라서 어떤 스타일 속성은 층별로 오버라이트된 후에야 최종적인 모습으로 사용자에게 제시되며, 중복된 reset 의 문제가 존재합니다: 만약 어떤 블록의 스타일이 확실히 커스터마이즈를 서포트할 필요가 있다면, 그것은 반드시 후속의 css 로 오버라이트되므로, 필요 없습니다 먼저 reset 으로 벗길 필요는 없습니까?

二.normalize

normalize: 정규화, 정상화, 표준화

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

normalize 는 몇 가지 일을 수행합니다:

  • 브라우저의 디폴트 스타일 중에서 유용한 부분을 유지

  • 동시에 크로스브라우저의 일관성을 보증 (각 브라우저에 존재하는 W3C 사양에 준거하지 않는 문제를 수정)

  • 적절한 곳에서 디폴트 값을 설정

normalize 는패치 성격의 것으로, reset 이 파괴적인 것과는 다릅니다. 예를 들어 normalize.css 소스 코드:

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

여기서 프런트엔드 방안을 통해 브라우저에 존재하는 스타일 문제를 수정하고, 동시에 저버전 브라우저의 호환성을 고려하며, 여기서는「표준화」를 지향합니다. 더욱이, 「정상화」의 측면도 있습니다:

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

선배가 이미 소스 코드를 해석했습니다ので, CSS Reset 에 관한那些事（二）之 Normalize.css 소스 코드 해석 참조

三.normalize 와 reset 의 차이

어느 조크:

CSS Reset 은 혁명당으로, CSS Reset 에서 가장 과격한 일파는 당신小子가 유용한가 무용한가와 관계없이, 모두 그 옷을 벗으라고 주장합니다. 왜 당신 body 는 태어날 때부터 한一圈 margin 을 입고 있는지, 왜 당신 성 h 의는 타인보다 더 살쪘는지, 왜 당신 ul 은 한 팔의 구슬을 착용하고 있는지. 그래서 *{margin:0;} 등의 운동으로, 모두를 평평하게 했습니다. 일견 중생평등한 것 같지만, 실제로는 자원을 낭비하고 싸게도つかず, 타인을 필요로 할 때에는 비굴하게도 추가하여戻す 필요가 있으며, 정말로 타인의 디폴트 스타일을 필요로 하는 경우는 어떻게 합니까? 타인의 냄비는 이미 화로 안에 던져져 구워졌습니다ので, 스스로 어떻게든 하십시오.

Normalize.css 는 개량파입니다. 그들은 주장합니다, 각 요소에는 존재하는 이유가 있으며, 단순 포폭하게 일시동인하는 것은 좋지 않다고. body 의那一圏은 확실히 페이지의 생존 공간을 압박하고 있으므로, 그것을 수정합니다. 사농공상, 누구有谁의 작용이 있으며, 그들에게 규범을 제정하고, 모든 브라우저에서 자신의 일을 제대로こなす 것을 보증합니다.

知乎 코드를撸る段子手의 답변 에서 인용

reset 의 특징

목표: 모든 브라우저의 표현을 강제로 일치시킴

브라우저로부터의 디폴트 스타일의 대다수를 제거하고, common, page 등의 스타일 하층이 정연한 초기 표현임을 보증합니다

따라서 일반 의미의 reset 은 파괴적이고, 모두 벗깁니다

주로 2 つ의 문제가 존재합니다:

  • 중복된 reset, 퍼포먼스에 영향

잘못 쓰인 reset(본래 필요 없는), 또는 상층에서 반드시 오버라이트되는 reset(필요 없는) 모두, 스타일 파일을 증대시키고, 렌더링 퍼포먼스에 영향줍니다

잘못 죽이기도, 놓치기도 쉽습니다. 정확한 고성능 reset? 실현은 어렵고, 존재조차 하지 않습니다 (FF, Chrome, Safari 이외, 아직一大堆의 xx 브라우저가 있으며, 谁知道它的 디폴트 스타일이 무엇인지)

  • 그룹에 시맨틱스가 없고, 유지가 어려움

reset 중의 태그의 분류는 시맨틱스를 고려하지 않고, 디폴트 표현에만 관심 있습니다

야기되는 결과는, 디버그 도구로 어떤 요소를 확인하고, 어떤 속성에 관심을 가지고, 한 층씩 쫓아가면, 마지막에 일련의 무관계한 태그가 함께 묶여, 1 つか 2 つ의 룰이 적용されている 것을 보게 됩니다

퍼포먼스에 대해서는, 문제가 되기 전에는 문제가 아닙니다. 소문에 따르면 * {padding:0; margin:0;} 의 렌더링への 영향도 2ms 뿐이며, 만약 정말로 그렇다면, 생각할 필요もなく, 직접 모두 벗기는 것이 최선입니다. 더욱 복잡 (더 길고, 더 인도적) 인 reset 이 가져오는 악영향 (스타일 파일의 증대) 과 비교하여, 렌더링 시의 2ms 는 참깨보다도 작기 때문입니다

유지의 문제는, 실제로는 정확한 고성능 reset 을 가리키며, 만약 reset 이 적절하다면, 스타일 문제는 reset 과 무관계할はずです. 디버그中发现에서 하층을 쫓을 필요가 있다면, reset 이 충분하지 않음을 나타냅니다

「reset 하지 않으면 안 됩니까?」

「물론 안 됩니다, reset 하지 않는 경우,那么多의 브라우저, 뭔가 이상한 디폴트 스타일이 있을지도 모르므로, 프런트엔드는 1px 의 집착을 가져야 하며, 디자인 초고를 정확히 재현할 필요가 있습니다」

실제 잘 생각해 보면, 왜 우리는 reset 이 필요한가? 모두가 사용하고 있으니까?

확실히 많은 reset 스타일은 업무 중에서 영원히 사용되지 않습니다 (오래된古董 legend, fieldset 및 새로운 시맨��� 태그 aside, section 은 순 모바일 페이지에서는 거의 필요 없습니다). 정말로 유용하고常用的한 것은 body {margin: 0; } 뿐이며, 다른 것은 사용할 때 전면적으로 다시 쓸 필요가 있거나, 영원히 사용되지 않는가의どちらか입니다

따라서 몇 년 전에 no reset 운동이 일어나고, 그 후 normalize 를 맞이했습니다……그러나대답 은 도대체 무엇인가?

normalize 의 특징

소스 코드로부터发现すると normalize 는 패치처럼, 브라우저의 디폴트 스타일을 더욱「정상」으로 합니다:

/* 1.스타일 패치, 브라우저의 차이를修补하고, 그 표현을 표준에 가깝게 함 */
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/* 2.미량의 reset */
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

마찬가지로, 소스 코드를 통해发现すると, 그것은 reset 의 대체품은아닙니다:

  • reset 은도로 롤러 와 같아서, 연 후로 노면은 매우 평탄

  • normalize 는아스팔트 와 같아서, 노면의 균열, 작은 구멍을 메움

그러나, 우리는 이 층의 아스팔트가 필요한가? Bootstrap 이 사용했다고 해서 우리도 사용해야 하는가?

순 모바일 페이지来说, normalize 里的 98% 의 스타일은 사용하지 않으며, 매우巧く, 유용한 수 행은 아마도 아직:

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

물론, Bootstrap 은 PC 와 모바일端을 동시에 서포트할 필요가 있고, 大屏小屏을 适配하며, 1 つ의 프레임워크가 이러한 호환 코드를 도입하는 것은 자연히 틀리지 않으며, 더욱 견고해집니다

그러나 우리의 애플리케이션은 정말로 normalize 를 필요로 하지 않을지도 모릅니다. 필요하더라도, 아마도 그 중에서 정말로 사용할 수 있는 30% 만을 취할 필요가 있으며, 나머지 부분은 업무의 특징에 따라, 어떤 추한 디폴트 스타일 (예를 들어 table) 을 제거하고, 더욱 기초 스타일을 삽입하고, 각 페이지에서 이러한 것들을 설정하는 것을 피합니다.那么마지막에 생성하는 이 css 는——base.css 라고 부릅니다

四.css 3 층 구조

  • base: 기본 스타일

사이트 레벨의, 가장 기초적이고, 가장 공통의 스타일로, 다른 스타일 다른 콘텐츠의 사이트가 base 스타일을 공용할 수 있습니다

base 는 원자적이고,これ以上 분할할 수 없습니다. 예를 들어 호환성이 좋은 flex, clearfix 등

reset 과 base 는 병렬로, 기본 스타일 컴포넌트로서, 물론, 간단한 reset 을 base 층에 놓는 것도できます

  • common: 공통 스타일

모듈 레벨의, 커스터마이즈된 스타일 모듈로, 각 페이지에서 재이용할 수 있습니다

base 층의 기초상에서 더욱 복잡한 스타일 모듈을 제공합니다. 예를 들어 캘린더, popup 등

  • page: 페이지 스타일

페이지 레벨의, 재이용을 필요로 하지 않는 스타일

구체적인 페이지에 대해, 특유의 스타일을 추가합니다. 예를 들어 구체적인 색 값, 폰트, hack 등

합리적인 층분류는 효과적으로 스타일의 재이용성을 향상할 수 있고, 고층에서 간단하게 저층의 어떤 스타일 룰을 오버라이트함으로써 최종적인 스타일을 변경할 수 있습니다. 더욱이 스타일의 보수성을 향상할 수 있고, 각 층의 분업이 명확하며, 신규 스타일은 대호입좌하며, html 중에서는 class 조합의 방식으로 최종적인 스타일을 실현합니다

base 층과 common 층은 적은 사람으로 책임지고 관리 유지해야 하며, 빈번하게 변동하지 않지만, 확장할 수 있습니다. 개발자는 직접 UI 디자인 초고에 대해 page 층 스타일을 완성하고, 시각 효과를 실현합니다. page 층 스타일을 편할 때도 마찬가지로 3 층 구조에 따라 조직할 수 있습니다. 예를 들어:

/* base */
body {
    background-color: #eee;
}
h1 {
    border-bottom: 1px solid #ccc;
}
/* common */
.panel {
    border: 1px solid #ddd;
}
.line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* page */
h1 span {
    border: 1px solid red;
    border-raduis: 3px;
}
.panel .line {
    line-height: 1.5em;
}

五.정리

reset? normalize? 필요한가? 필요하지 않은가?

업무를 위해 커스터마이즈된 것이 최선이며,精简, 高效입니다

참고 자료

댓글

아직 댓글이 없습니다

댓글 작성