为初学者制作自己的重置CSS的过程摘要

重启

重置CSS用于重置浏览器在加载样式表中编写的代码之前默认具有的CSS。

这次,我将从重置CSS的基本知识向您介绍制作自己的过程。通过了解“为什么以及如何”在重置CSS中重置的选择器,我们可以更好地理解样式表。

[对于初学者]仔细解释如何编写CSS(样式表)

什么是重置CSS?

如开头所述,重置CSS是用于重置每个浏览器默认具有的CSS的CSS。

为什么需要重置CSS

需要重置CSS的原因是,无论您使用哪种浏览器(例如Chrome,FireFox或IE),它都能提供预期的显示效果。当然,“重置CSS使生产更容易”也是有原因的,但是请注意,浏览器注意事项是用户注意事项。

使用重置CSS时出现问题

当然,使用重置CSS也会引起问题。例如,存在以下三个问题。

  • CSS描述的数量大于未使用时的数量
  • 包括与显示无关的无用描述
  • 无法利用浏览器默认CSS

文件大小将按重置CSS中所述的数量增加。如果您可以估计使用重置CSS实现相同的显示时样式表中写入的数量会更多,请重新考虑是否确实应使用重置CSS。

也,nomalize.css设计如此广泛使用的Reset CSS往往包含与所生产产品的展示无关的描述。为了创建更完整的产品,有必要检查重置的CSS是否包含不必要的描述,并在必要时删除该描述。

此外,每个浏览器的默认装饰(例如输入和选择元素)可能会有些完整。如果可以利用每个浏览器的默认装饰,则有时需要做出选择。

典型的重置CSS

以下五个是典型的重置CSS。

YUI库重置CSS和Eric Meyer’由于s Reset CSS不支持HTML5,并且未考虑最近样式表的情况,因此,如今使用它的人并不多。 HTML5 Doctor重置CSS已变得流行起来。

另一方面,严格来说,考虑到最新浏览器环境和HTML规范的nomalize.css和sanitize.css会利用浏览器的默认样式,并且会定期更新,因此不会重置。说它格式正确(或重新定义)可能更合适。但是,使用浏览器的默认样式而不是完全重置有很大的优势,并且这两个都是在最近的开发中选择的。

暂时供参考nomalize.css看内容,有近400行。即使在实际使用过程中对其进行了压缩,它也包含在有限情况下使用的元素的描述,例如表单和进度标签,因此可能并不适合每次都读取它们。 (如果不需要,可以编辑和使用Nomalize.css。)在许可方面没有问题。)

例如,如果您查看有关nomalize.css中的h1标签的说明,

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

规定这种描述可能会令人讨厌,这取决于要生产的产品。因此,在设计样式表之前,最好在仔细考虑构造时间,人力,描述量等之后选择重置CSS。

自制的重置CSS程序

但是有时您可能想摆脱重置CSS的困扰。我认为只能使用默认样式的一小部分。因此,如果您可以创建自己的重置CSS,则可以为每种产品设计一个灵活的CSS。因此,让我们制作自己的重置CSS。

粗略地说,创建自己的重置CSS的步骤

  • 选择您要重置的标签
  • 排除未使用的标签
  • 完成CSS压缩

将是三个。

如果将类分配给大多数HTML标记,并且HTML的结构使其可以在文档中使用,请参阅HTML5 Doctor重置样式表,仅重置未使用的标记;从CSS中删除,并完全重置标记的默认样式。这样做效率更高。另一方面,请勿将重置CSS应用于希望利用默认浏览器样式表的标签。

在下面,我将至少写出重置时如何应用CSS属性,如何排除未使用的标签以及如何进行压缩。

重置边距,填充,边框

就像发布任何页面而没有编写任何CSS的人都会知道的那样,默认情况下,为每个标签分配了边距和填充。通过一次将其重置为零,您将摆脱“那个?这里有一个奇怪的边距,它是从某个地方继承来的?”。

在HTML5 Doctor重置CSS中,在每个标记中指定margin:0; padding:0; border:0;来消除此继承问题,如下所示。

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, 菜单, nav, section, 概要,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

匹配字符样式

默认情况下,每个标题标签的字体大小都不同。根据设计,您可能希望标题标签具有相同的字体大小。要使字体大小统一,请为HTML文档中使用的所有标记指定font-size:100%;,以便从父元素继承字体大小。

如果您不使用粗体,则可以通过将字体粗细调整为常规来简化诸如强标签之类的装饰。另外,不要忘记对齐inline元素中指定文本,图像等的垂直对齐的vertical-align。

对齐线高

如果您具有相同的线高line-height,则更容易构建CSS。在HTML5 Doctor的描述中,为body的行高指定了1,如下所示。

body {
    line-height: 1;
}

请注意,我们在此处将line-height指定为无单位值。如果指定单位(例如em),则后代元素的行高可能会变成意外的高度。

指定框大小

指定框大小:border-box;其中元素宽度可以包含填充和边框。它不是为HTML5 Doctor编写的。如果指定框大小,则CSS组装会容易得多,并且描述会相对较小。

selector {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

删除不必要的描述

如果您已自定义现有的重置CSS,请删除不需要重置的不必要描述。

例如,HMTL5 Doctor重置CSS包含hgroup。 hgroup是一个不推荐使用的HTML标记,一般不应在HTML中使用,因此重置它没有什么意义。如果要考虑可维护性和可扩展性来进行实际的HTML设计,则应该有HTML中未使用的其他标签,因此请在此时删除未使用的标签。

同样,在许多页面上也不需要为输入和选择等特定目的而重置标签。如果不需要它,可以删除它,但涉及提交表单的页面除外。 (在移动开发中,如果删除它,将会有很多问题。)

压缩重置CSS

此时,您应该只拥有产品所需的重置CSS。由于项目发布后几乎没有机会修改重置的CSS,因此即使重置CSS部件也被压缩。 CSS压缩工具CSS Minifier如果使用在线工具,这很容易。

样品

作为示例,我将介绍一种我实际使用的自制重置CSS。

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}
body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}

如您所见,仅初始化在HTML文档中频繁出现的标签,并且不初始化输入和按钮。当您要快速装饰没有表单的静态页面时使用它。如果暂时使用此方法重置它,只要没有不寻常的HTML标签,就可以。

请自己准备其中的一些内容,然后制作适合您的重置CSS,同时进行适当的微调。

最后

在继续生产时,您将养成自己的代码的习惯和模式。然后,我认为您将能够自然地创建适合您书写风格的原始重置CSS。我认为重置CSS没有正确的答案,但是如果在设计CSS之前仔细考虑一下,这样做会更好。

撰写本文的人

ケイタ

潜伏在东京的一位网络工程师。我做各种各样的事情,例如生产/运营/数据分析。 応援は@keitaoriginal请从。