8个CSS技巧，帮助减少重复规则和重复

8个CSS技巧，帮助减少重复规则和重复，规范布局中的样式流程，不仅可以有效创建自己的框架，还可以解决许多常见问题。问题。

1。使用CSS重置

css重置库，例如normalize.css，已经使用了多年。它们可以为您的网站风格提供更清晰的标准，以确保跨浏览器的一致性。之间的和谐。大多数项目不需要这些库中的所有规则。您可以通过对布局的所有元素应用简单的规则、删除所有边距和填充来更改浏览器的默认框模型。

*{
 box-sizing:border-box;
 margin:0;
 padding:0
 }

箱子尺寸声明的使用是可选的，如果您使用下面

2下面的旧箱子样本表格，则可以跳过它。继承盒模型

让盒模型继承html：

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}

3。使用 Flexbox 摆脱边距、宽度 Flexbox 调整边距以打破所需的行数。为了避免第 n 个、第一个和最后一个子问题，您可以使用 flexbox

.flex-container{
  display:flex;
  justify-content:space-between;
}
.flex-container .item{              
  flex-basis:23%;
}

4 的 space- Between 属性值。使用：not()解决列表边框问题

在网页设计中，我们通常使用last-child nth-child选择器来覆盖最初在父选择器上声明的样式。例如，导航菜单为每个链接创建一个带有边框的分隔符，然后添加一条规则以删除最后一个链接的边框

.nav li {    
    border-right: 1px solid #666;  
}
.nav li:last-child {    
    border-right: none;  
}

。这是一个非常令人困惑的方法。它不仅强制浏览器单向渲染，然后使用特定选择器撤消它。像这样的压倒一切的风格是不可避免的。然而，最重要的是，我们可以使用： not a伪类（pseudo-class）来在我们要声明的元素上只使用一种样式：

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

如上，除了最后一个 li 添加的 . nav li边框风格，不是很简单！当然你可以使用 .nav li+li 或 .nav li:first-child ~li ，但是 :not 更语义化，更容易理解。

5 在正文中添加行高样式

导致样式表效率低下的原因之一是不断重复声明。最好创建项目设计和组合规则，以使 CSS 工作更顺畅。为了实现这一点，我们需要了解级联以及如何在其他地方继承用通用选择器编写的样式。行间距（行高）可以用作整个项目的属性集。不仅可以减少代码量，还可以让您的网站具有标准的外观和感觉

body {    
    line-height: 1.5;  
}

注意，这里的声明中没有单位，我们只是告诉浏览器将行高显示为1.5倍渲染字体大小

6 垂直居中（Center Anything Vertically）

如果您不打算使用 CSSGrid 布局，请设置全局垂直居中布局。规则是为内容的优雅布局奠定基础的好方法

html, body {    
    height: 100%;    
    margin: 0;  
}    
body {    
    -webkit-align-items: center;    
    -ms-flex-align: center;    
    align-items: center;    
    display: -webkit-flex;    
    display: flex;  
}

所有垂直居中方法的详细信息：https://codeqd.com/zb_users/upload/2023/09/h4pSVG 适用于所有分辨率类别，并且受所有浏览器支持。所以.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选择器”

使用通用选择器（universal selector）*和相邻的兄弟Selector + 提供了强大的 CSS 功能，可以为文档流中跟随其他元素的所有元素设置统一的规则

* + * {    
    margin-top: 1.5rem;  
}

这是一项很棒的技术，可以帮助您创建更一致的类型和间距。在上面的示例中，其他元素后面的元素（例如 H3 后面的 H4 或段落后面的段落）的间距必须至少为 1.5 rel（约 30 像素）

Byflower_emma
链接：https:// juejin.im/post/5aaa3d9b518825558a065950
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明来源。