如何用自己喜欢的 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 盒子模型的工作方式。它会改变计算 width、 height、 padding、 border 和 margin 的方式。
box-sizing 的默认设置是 content-box。我更喜欢将其改为 border-box,因为这样更容易设置 padding 和 width。
有关 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}
删除边距和填充
浏览器对不同元素 margin 和 padding 的设置各不相同。当我不了解这些时,默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。
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.75em 和 1em ,因为这看起来更符合我经验中的合理默认值。
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}
媒体元素
媒体元素包括 img、 video、 object、 iframe 和 embed。我倾向于让这些元素符合其容器的宽度。
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)。
©著作权归作者所有:来自51CTO博客作者mb5ff980b461ced的原创作品,如需转载,请注明出处,否则将追究法律责任更多相关文章
- Web UI自动化测试之元素定位
- LeetCode #27 移除元素
- (美团)巧用数组下标,轻轻松松找出所有元素
- 超详细!详解一道高频算法题:数组中的第 K 个最大元素
- 动画:面试必刷之二维数组中查找一个元素
- 前 K 个高频元素告诉你桶排序有啥用
- Python办公自动化|光速对比并提取两份Word/Excel中的不同元素
- 动画: 快速排序 | 如何求第 K 大元素?
- PHP+JavaScript实现刷新继续保持倒计时的按钮