如何用自己喜欢的 CSS 风格重置网站的样式[每日前端夜话0x44]

翻译:疯狂的技术宅 原文:https://medium.freecodecamp.org/how-i-style-my-websites-with-my-favorite-css-resets-7ace41dbc43d

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。

在本文中,我会与你分享我自己的 CSS reset 项(除了 Normalize.css 之外我还使用它们)。

我将 reset 项分为8类:

  1. 盒子大小
  2. 删除边距和填充
  3. 列表
  4. 表格和按钮
  5. 媒体元素
  6. 表格
  7. 隐藏属性
  8. Noscript

调整盒子大小

box-sizing 属性改变了 CSS 盒子模型的工作方式。它会改变计算 widthheightpaddingbordermargin 的方式。

box-sizing 的默认设置是 content-box。我更喜欢将其改为 border-box,因为这样更容易设置 paddingwidth

有关 Box Sizing 的更多信息,你可能对“了解Box大小”(https://zellwk.com/blog/understanding-css-box-sizing/)感兴趣。

1html {
2  box-sizing: border-box;
3}
4*,
5*::before,
6*::after {
7  box-sizing: inherit;
8}

删除边距和填充

浏览器对不同元素 marginpadding 的设置各不相同。当我不了解这些时,默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。

 1/* Reset margins and paddings on most elements */
 2body,
 3h1,
 4h2,
 5h3,
 6h4,
 7h5,
 8h6,
 9ul,
10ol,
11li,
12p,
13pre,
14blockquote,
15figure,
16hr {
17  margin: 0;
18  padding: 0;
19}

列表

我在很多情况下都使用无序列表,而且很多情况下都不需要 disc 样式。在这里我将 list-style 设置为 none 。当我需要 disc 样式时,会在特定的 <ul>上手动设置它。

1/* Removes discs from ul */
2ul {
3  list-style: none;
4}

表单和按钮

浏览器不会继承表单和按钮的排版。他们将 font 设置为 400 11px system-ui。我认为这是令人难以置信和奇怪的。所以我总是要手动让它们从祖先元素继承样式。

1input,
2textarea,
3select,
4button {
5  color: inherit; 
6  font: inherit; 
7  letter-spacing: inherit; 
8}

不同的浏览器为表单元素和按钮设置了不同的边框样式。我很不喜欢这些默认样式,宁愿将它们设置为 1px solid gray

1input,
2textarea,
3button {
4  border: 1px solid gray; 
5}

我对按钮做了一些调整:

  1. 将按钮的 padding 设置为 0.75em1em ,因为这看起来更符合我经验中的合理默认值。
  2. 删除了应用于按钮的默认 border-radius
  3. 强制背景颜色是透明的
1button {
2  border-radius: 0; 
3  padding: 0.75em 1em;
4  background-color: transparent;
5}

最后,我将 pointer-events: none 设置为按钮内的元素。这主要用于 JavaScript 交互。

(当用户点击按钮中的某些内容时,他们点击的内容是 event.target ,而不是按钮。如果按钮内有 HTML 元素,这种风格可以更轻松地处理 click 事件)。

1button * {
2  pointer-events: none;
3}

媒体元素

媒体元素包括 imgvideoobjectiframeembed。我倾向于让这些元素符合其容器的宽度。

I also set these elements to display: block because inline-block creates unwanted whitespace at the bottom of the element. 我还将这些元素设置为 display: block ,因为 inline-block 在元素的底部创建了不需要的空格。

1embed,
2iframe,
3img,
4object,
5video {
6  display: block;
7  max-width: 100%;
8}

表格

我很少使用表格,但有时它们可能很有用。这是我的默认样式:

1table {
2  table-layout: fixed;
3  width: 100%;
4}

当元素具有 hidden 属性时,应该从视图中隐藏它们。 Normalize.css 已经为我们做了这件事。

1[hidden] {
2  display: none;
3}

这种风格的问题是它的特异性低。

我经常将 hidden 添加到用类设置的其他元素中。类的特异性高于属性,并且 display: none 属性不起作用。

这就是为什么我选择用 !important 提高[hidden]的特异性。

1[hidden] {
2  display: none !important;
3}

Noscript

如果一个组件需要 JavaScript 才能工作,我会添加一个 <noscript> 标签让用户知道(如果他们已经禁用了JavaScript)。

这样为 <noscript> 标记创建默认样式:

1/* noscript styles */
2noscript {
3  display: block;
4  margin-bottom: 1em;
5  margin-top: 1em;
6}

总结

很多人对我提到的这些样式风格感兴趣。这个链接是我在 Github 的 CSS Resets 仓库(https://github.com/zellwk/css-reset)。

原文发布于微信公众号 - 前端先锋(jingchengyideng)

原文发表时间:2019-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券