犀利的CSS逻辑属性-优雅的减少代码量

犀利的CSS逻辑属性-减少代码量

什么是CSS逻辑属性

CSS逻辑属性是CSS3中新增的属性，它将多个CSS属性合并成一个属性，从而简化CSS的书写。逻辑属性可以同时设置元素的多个方向上的属性，例如内联方向和块状方向。逻辑属性的名称以“-inline”或“-block”结尾，表示它们可以用于设置元素的内联方向属性或块状方向属性。逻辑属性还可以用于更方便地管理flexbox和grid布局等CSS布局属性。

使用CSS逻辑属性的优势

1.代码简洁明了：使用逻辑属性可以将多个CSS属性合并成一个属性，从而减少了代码的重复书写，使代码更加简洁明了。
2.增强可读性：逻辑属性可以使代码更加语义化，增强了代码的可读性。使用逻辑属性时，可以更加清晰地表达元素的样式和布局意图。
3.提高可维护性：使用逻辑属性可以减少代码的冗余，从而降低了代码的维护成本。如果需要修改元素的样式和布局，只需要修改逻辑属性的值即可，而不需要修改多个CSS属性。
4.更加灵活：逻辑属性可以同时设置元素的多个方向上的属性，例如内联方向和块状方向。这使得CSS的书写更加灵活，可以更加方便地控制元素的样式和布局。
5.提高开发效率：使用逻辑属性可以提高开发效率，减少了代码的书写量，使开发更加高效。 综上所述，使用CSS逻辑属性可以提高代码的可读性和可维护性，减少代码的冗余，提高开发效率，使CSS的编写更加简洁明了和灵活。

例子

1.margin-inline 和 margin-block
在以前，如何我们希望某个元素水平距离的 margin 值为16px

margin: 0 16px; // 这个简写会影响margin的上下距离

// 分开左右写就不会影响上下
margin-left: 16px;
margin-right: 16px;

但是现在，我们可以直接这样写：

margin-inline: 16px;

是不是超方便简洁。
同理，希望某个元素垂直距离的 margin 值为16px时：

margin-block: 16px;

pading 的属性和margin一样。

2.border-inline 和 border-block
在以前，如何我们希望某个元素须同时设置上下边框：

border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
// 或者
border: solid #ddd;
border-width: 1px 0;

但是现在，我们可以直接一步到位：

border-block: 1px solid #ddd;

同理，希望某个元素某个元素须同时设置左右边框时：

border-inline: 1px solid #ddd;

3.最犀利的 inset 属性
在以前，我们写页面弹窗上下左右居中时：

position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

现在，我们可以直接这样：

position: fixed;
inset: 0;
margin: auto;

一模一样的效果，属性少写好几个。
如果只需 left: 0; right: 0 为0的话，这样写：

inset-inline: 0;

垂直方向：

inset-block: 0;

兼容性

CSS逻辑属性虽部分兼容性较差，但但对于现代浏览器，基本已做到完全兼容。目前在内部项目中已经可以放心使用。也可以使用合适的CSS工具自动转换为安全的传统的CSS属性，这样，开发便捷和最终的呈现两不耽误啦。

结语

牵手 持续为你分享各类知识和软件 ，欢迎访问、关注、讨论 并留下你的小心心❤