转发链接：
前言
随着后端开发越来越注重效率：通过使用选择器和简化代码来快速加载和渲染。 像Less和SCSS这样的预处理器在工作时，需要走很长的路，直接使用css会更快。
这里有20种CSS方法，可以帮助你减少重复规则和重复，规范布局中的样式流程，除了帮助你高效创建自己的框架之外，还可以解决很多常见问题。
1.使用CSS重置（reset）
CSS 重置库（例如 normalize.css）已使用多年，为您的网站样式提供更清晰的标准，以确保跨浏览器的一致性。
大多数项目不需要该库中包含的所有规则。 您可以将简单的规则应用于布局中的所有元素，删除所有边距和填充，并更改浏览器的默认框模型。
*{
box-sizing:border-box;
margin:0;
padding:0
}使用 box-sizing 声明是可选的，如果使用下面继承的盒子模型方法，则可以跳过它。
2.继承盒模型
让盒模型继承自html：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}3.使用flexbox布局防止边距问题（GetRidofMarginhackswidthFlexbox）
当您多次尝试设计诸如作品集或图片库之类的网格布局时css3设置背景图片，如果您使用浮动，则需要清理浮动并重置边距以使其分解为所需的行数。 为了防止第n个、第一个、最后一个子问题，可以使用flexbox的space- Between属性的值。
.flex-container{
display:flex;
justify-content:space-between;
}
.flex-container .item{
flex-basis:23%;
}4.使用:not()解决列表边框问题
在网页设计中，我们通常使用：last-child nth-child 选择器来覆盖之前声明在父选择器上的样式。 例如，对于导航菜单，使用边框为每个链接 Link 创建分隔符，然后添加规则以删除最后一个链接的边框
.nav li {
border-right: 1px solid #666;
}
.nav li:last-child {
border-right: none;
}
这是一种混乱的形式，什么都不做，只是强制浏览器以一种方式呈现，然后用特定的选择器撤消它。 这种覆盖风格是不可避免的。 但是，最重要的是，我们可以通过使用 :not 伪类在要声明的元素上仅使用一种样式：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}里面不仅最后一个li，所有的.navli都有边框样式，是不是很简单！
其实也可以用.navli+li或者.navli:first-child~li，而:not更语义化（semantic），容易理解。
5.为正文添加行高样式
导致样式表效率低下的原因之一是不断重复声明。 最好做好项目规划和组合规则，这样CSS会更流畅。 为了实现这一点，我们需要了解级联以及如何在其他地方继承通用选择器中编写的样式。
线宽（line-height）可以作为你整个项目的属性集，除了可以减少代码量，让你的网站风格呈现标准的外观
body {
line-height: 1.5;
}请注意，这里的声明没有单位，我们只是告诉浏览器使其渲染高度为渲染字体大小的 1.5 倍
6. 任意元素垂直居中（vertical-centeranything）
当没有计划使用CSSGrid布局时，设置垂直居中布局的全局规则是一个很好的形式，可以为优雅地设置内容布局打下基础
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}7. 使用 SVGicons
SVG 适用于所有类，但也受所有浏览器支持。 所以.png.jpg.gif之类的文件可以被丢弃。 FontAwsome5 中也提供了 SVG 图标字体。 格式化 SVG 就像任何其他图像类型一样：
.logo { background: url("logo.svg"); }温馨提醒：如果在按钮等交互元素上使用SVG，SVG会导致难以加载的问题。 您可以通过遵循此规则来确保 SVG 是可访问的（确保您已在 HTML 中设置了适当的 aria 属性）
.no-svg .icon-only:after {
content: attr(aria-label);
}8.使用“OWL选择器”
使用通用选择器（universalselector）*和相邻同级选择器（adjacentsiblingselector）+可以提供强大的CSS功能，为文档流中紧跟在其他元素之后的所有元素设置统一的规则
* + * {
margin-top: 1.5rem;
}这是帮助您创建更均匀的类型和宽度的好方法。 在反例中，其他元素后面的元素，例如 H3 之前的 H4，或者段落之后的段落，它们之间的宽度至少为 1.5rems（约 30px）
9. 一致的垂直节奏
一致的垂直节奏提供了视觉美感，使内容更具可读性。 如果 owl 选择器太通用，请在元素内使用通用选择器 (*) 为布局的特定部分创建一致的垂直节奏：
.intro > * {
margin-bottom: 1.25rem;
}10. 使用 box-decoration-break 使文本换行更美观
假设您想要对换行成多行的长文本行应用统一的宽度、边距、突出显示或背景颜色，但您不希望整个段落或标题看起来像一个大块。 BoxDecorationBreak 属性允许您仅将样式应用于文本，同时保持填充和前导不变。
如果您想在悬停时应用突出显示，或在滑块中设置文本样式以具有突出显示的外观，这尤其有用：
.p {
display: inline-block;
box-decoration-break: clone;
-o-box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}内联块声明允许将颜色、背景、行距和填充应用于文本的每一行，而不是整个元素，而克隆声明可确保此样式均匀地应用于每一行。
11. 等宽表格单元格
表格可能很难处理，因此请尝试使用 table-layout:fixed 来保持单元格长度相等：
.calendar {
table-layout: fixed;
}12.强制使用属性选择器显示空链接
这对于通过 CMS 插入的链接非常有用，这些链接通常没有类属性，并且可以帮助您专门设置它们的样式，而不会影响级联。 例如，该元素没有文本值，但 href 属性有一个链接：
a[href^="http"]:empty::before {
content: attr(href);
}13. 设置“默认”链接样式
说到链接样式，您几乎可以在每个样式表中找到通用的 A 样式。 这会提示您为子元素中的任何链接编写额外的覆盖和样式规则，但是当使用 WordPress 等 CMS 时，可能会导致您的侧链样式比按钮文本颜色更成问题。
尝试以下侵入性较小的方法来设置“默认”链接的样式：
a[href]:not([class]) {
color: #999;
text-decoration: none;
transition: all ease-in-out .3s;
}14. 比例箱
要创建具有固有百分比的框，您所需要做的就是将底部或顶部填充应用于 div：
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}
.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}填充 20% 会使盒子的高度等于其长度的 20%。 无论图层长度如何，子 div 都将保持其纵横比 (100%/20% = 5:1)。
15.破碎的图像
这种方法不是为了减少代码，而是为了细化设计细节。 图像损坏的原因有很多，要么难看，要么令人困惑（只是一个空元素）。 使用这个小 CSS 创建更美观的效果：
img {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
img:before {
content: "We're sorry, the image below is missing :(";
display: block;
margin-bottom: 10px;
}
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}16、使用rem进行全局调整大小； 使用 em 进行本地调整大小
设置根目录的基本字体大小后，如html font size: 15px;，可以将包含元素的字体大小设置为rem：
article {
font-size: 1.25rem;
}
aside {
font-size: .9rem;
}之后将文本元素的字体大小设置为 em
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}现在，每个包含的元素都被分隔开，以便更轻松地设计、更轻松地维护和更大的灵活性。
17.隐藏未静音的手动播放视频
当您处理不易通过源代码控制的内容时，这是自定义用户样式表的好方法。 此方法将帮助您防止在页面加载时手动播放视频中的声音来分散访问者的注意力，并再次提供精彩的 :not() 伪选择器：
video[autoplay]:not([muted]) {
display: none;
}18、灵活运用根类型
相应布局中的字体大小应手动调整为视口，从而节省了编写媒体查询来处理字体大小的工作。 您可以使用 :not 和视口单位根据视口高度和长度估计字体大小：
:root {
font-size: calc(1vw + 1vh + .5vmin);
}今天，您可以使用 root em 单位，它基于 :not:
body {
font: 1rem/1.6 sans-serif;
}与之前的 rem/em 方法相结合以实现更好的控制。
19.设置表单元素上的字体大小以获得更好的联通体验
为了防止联通浏览器（iOSSafari等）点击下拉列表时放大HTML表单元素，请添加font-size样式：
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}20.CSS变量
最后，CSS 最强大的级别来自 CSS 变量，它允许您声明一组通用的属性值，这些属性值可以与样式表中任何位置的关键字一起重用。 为了保持一致性，您可以在整个项目中使用一组颜色。
在 CSS 中一遍又一遍地重复这个颜色值不仅令人厌恶，而且还容易出错。 如果某种颜色需要在某个时刻发生变化，您就必须查找并替换css3设置背景图片，这既不可靠也不快速，并且在为最终用户构建产品时，变量使定制变得更加容易。 例如：
:root {
--main-color: #06c;
--accent-color: #999;
}
h1, h2, h3 {
color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
color: var(--accent-color);
}推荐CSS学习相关文章
详解100个CSS知识点（第1部分）《干货满满》
详解100个CSS知识点（下）《干货满满》
教你CSSFlex布局“真香”
精品用SVG实现高贵的提示框
CSS3知识手工总结【思维导图】
教你55个提升CSS开发效率必备要素
教你常见的CSS布局形式【实践】
让CSSflex布局最后一行左对齐的N种方法
使用CSS变量让你的CSS看起来更精彩
纯CSS实现简单的骨骼动画【实践】
CSS解密实用方法总结
你可能不知道的49个CSS知识点
超级好用的CSS阴影方法简单来说
后端CSS编写104个知识点总结（一）
后端CSS编写104个知识点总结（二）
后端开发规范：命名规范、html规范、css规范、js规范
CSS变量实现黑暗模式，我的商店页面已经支持它
彻底理解 CSS 中的断字、自动换行、空白
深入讲解CSS渲染原理和优化策略
手把手教你深入CSS实现一个粒子动画按钮
教你如何在css中实现各种边框【实践】
总结21种优化CSS提高网站加载速度的方法详细教你【实践】
发表评论