当前位置: 首页 > web>阅读正文

CSS通用类设计

2021.11.23 朱丰华 1084 次 留下评论 7378字

CSS类对编写CSS代码有着极大的便捷之处，几乎所有的前端框架都会设计大量的CSS类。

受各个前端框架的启发，在这里设计编写一些通用的CSS类。每个类是单独使用的，不需要相互依赖，也不基于Less/Sass而是直接使用源代码，当然有时间也会编写基于Less/Sass版本。

间距（Spacing）

间距类的设计参考于bootstrap4。从bootstrap4开始提供了内置的间距类：

使用语法：

nameDirection-size

基础实例：

<p class="mr-2">Hello</p>
<p class="mx-auto">World</p>

<p class="p-3">CSS</p>

参数详解；

name描述
mmargin
ppadding
Direction描述
ttop
rright
bbottom
lleft
xleft and right
ytop and bottom
（空）all
size尺寸
00
10.25rem
20.5rem
31rem
41.5rem
53rem
autoauto

到此，很容易可以理解：mb-3表示margin-bottom:1.5rem。

提示：auto属性仅margin适用，如果仅一侧为auto则auto实际是剩余的值，两侧为auto时平均分配。

bootstrap还支持负值的margin，仅需要在size前加入n，例如 mx-n1表示margin水平方向值-1rem。但通常来说负值使用的较少，或者说几乎不使用。

以下为仿写的CSS间距类代码：

/* 
    margin/padding设计 范围：0.25rem ~ 3rem
    取值：0,
    1(0.25rem),
    2(0.5rem),
    3(1rem),
    4(1.5rem),
    5(3rem),
    auto(仅margin)
*/


/* size:0 */
.mt-0{
    margin-top: 0 !important;
}
.mr-0{
    margin-right: 0 !important;
}
.mb-0{
    margin-bottom: 0 !important;
}
.ml-0{
    margin-left: 0 !important;
}
.mx-0{
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.my-0{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.m-0{
    margin: 0 !important;
}
.pt-0{
    margin-top: 0 !important;
}
.pr-0{
    margin-right: 0 !important;
}
.pb-0{
    margin-bottom: 0 !important;
}
.pl-0{
    margin-left: 0 !important;
}
.px-0{
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.py-0{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.p-0{
    padding: 0 !important;
}
/* size:1 */
.mt-1{
    margin-top: 0.25rem !important;
}
.mr-1{
    margin-right: 0.25rem !important;
}
.mb-1{
    margin-bottom: 0.25rem !important;
}
.ml-1{
    margin-left: 0.25rem !important;
}
.mx-1{
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}
.my-1{
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}
.m-1{
    margin: 0.25rem !important;
}
.pt-1{
    padding-top: 0.25rem !important;
}
.pr-1{
    padding-right: 0.25rem !important;
}
.pb-1{
    padding-bottom: 0.25rem !important;
}
.pl-1{
    padding-left: 0.25rem !important;
}
.px-1{
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
.py-1{
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
.p-1{
    padding: 0.25rem !important;
}
/* size:2 */
.mt-2{
    margin-top: 0.5rem !important;
}
.mr-2{
    margin-right: 0.5rem !important;
}
.mb-2{
    margin-bottom: 0.5rem !important;
}
.ml-2{
    margin-left: 0.5rem !important;
}
.mx-2{
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}
.my-2{
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.m-2{
    margin: 0.5rem !important;
}
.pt-2{
    padding-top: 0.5rem !important;
}
.pr-2{
    padding-right: 0.5rem !important;
}
.pb-2{
    padding-bottom: 0.5rem !important;
}
.pl-2{
    padding-left: 0.5rem !important;
}
.px-2{
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.py-2{
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.p-2{
    padding: 0.5rem !important;
}
/* size:3 */
.mt-3{
    margin-top: 1rem !important;
}
.mr-3{
    margin-right: 1rem !important;
}
.mb-3{
    margin-bottom: 1rem !important;
}
.ml-3{
    margin-left: 1rem !important;
}
.mx-3{
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
.my-3{
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.m-3{
    margin: 1rem !important;
}
.pt-3{
    padding-top: 1rem !important;
}
.pr-3{
    padding-right: 1rem !important;
}
.pb-3{
    padding-bottom: 1rem !important;
}
.pl-3{
    padding-left: 1rem !important;
}
.px-3{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.py-3{
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.p-3{
    padding: 1rem !important;
}
/* size:4 */
.mt-4{
    margin-top: 1.5rem !important;
}
.mr-4{
    margin-right: 1.5rem !important;
}
.mb-4{
    margin-bottom: 1.5rem !important;
}
.ml-4{
    margin-left: 1.5rem !important;
}
.mx-4{
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}
.my-4{
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
.m-4{
    margin: 1.5rem !important;
}
.pt-4{
    padding-top: 1.5rem !important;
}
.pr-4{
    padding-right: 1.5rem !important;
}
.pb-4{
    padding-bottom: 1.5rem !important;
}
.pl-4{
    padding-left: 1.5rem !important;
}
.px-4{
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.py-4{
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
.p-4{
    padding: 1.5rem !important;
}
/* size:5 */
.mt-5{
    margin-top: 3rem !important;
}
.mr-5{
    margin-right: 3rem !important;
}
.mb-5{
    margin-bottom: 3rem !important;
}
.ml-5{
    margin-left: 3rem !important;
}
.mx-5{
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}
.my-5{
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}
.m-5{
    margin: 3rem !important;
}
.pt-5{
    padding-top: 3rem !important;
}
.pr-5{
    padding-right: 3rem !important;
}
.pb-5{
    padding-bottom: 3rem !important;
}
.pl-5{
    padding-left: 3rem !important;
}
.px-5{
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}
.py-5{
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
.p-5{
    padding: 3rem !important;
}
/* 
    size:auto，此值对padding无效，仅针对margin
    若一侧定值，则另一侧auto就是剩余空间
    若两侧auto，则平均分配
*/
.mt-auto{
    margin-top: auto;
}
.mr-auto{
    margin-right: auto;
}
.mb-auto{
    margin-bottom: auto;
}
.ml-auto{
    margin-left: auto;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.my-auto{
    margin-top: auto;
    margin-bottom: auto;
}
.m-auto{
    margin: auto;
}

文字（Text）

对文本节点的通用类设计

文本颜色

提供情景描述的颜色类

/* 文本颜色 */
.text-primary{
    color: #0d6efd !important;
}
.text-success{
    color: #198754 !important;
}
.text-danger{
    color: #dc3545 !important;
}
.text-warning{
    color: #ffc107 !important;
}
.text-info{
    color: #0dcaf0 !important;
}
.text-light {
    color: #f8f9fa !important;
}
.text-dark {
    color: #212529 !important;
}
.text-muted {
    color: #6c757d !important;
}

文字方向

分别有左对齐，居中对其，以及右对齐，而两端对齐是不被推荐的

/* 文字对齐 */
.text-start{
    text-align: left !important;
}
.text-center{
    text-align: center !important;
}
.text-end{
    text-align: right !important;
}

文字换行

换行相关，针对空白字符的wrap与nowrap，针对长文字的break。

.text-wrap{
    white-space: normal !important;
}
.text-nowrap{
    white-space: nowrap !important;
}
.text-break{
    word-wrap: break-word !important;
    word-break: break-word !important;
}

提示：最常使用的RTL语言阿拉伯语言不能断行，也就是break无效。

文字大小

类似标题的h1-h6的文字大小

font-size缩写为 fs-num

/* 文字大小 */
.fs-1 {
    font-size: 2.5rem !important;
}
.fs-2 {
    font-size: 2rem !important;
}
.fs-3 {
    font-size: 1.75rem !important;
}
.fs-4 {
    font-size: 1.5rem !important;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.fs-6 {
    font-size: 1rem !important;
}

文本装饰

文本装饰，指下划线，删除线等

保留了text-decoration属性名，以-连接其属性值。

/* 文本装饰 */
.text-decoration-underline {
    text-decoration: underline!important;
    text-decoration-line: underline !important;
    text-decoration-thickness: initial !important;
    text-decoration-style: initial !important;
    text-decoration-color: initial !important;
}
.text-decoration-line-through {
    text-decoration: line-through!important;
    text-decoration-line: line-through !important;
    text-decoration-thickness: initial !important;
    text-decoration-style: initial !important;
    text-decoration-color: initial !important;
}
.text-decoration-none {
    text-decoration: none!important;
    text-decoration-line: none !important;
    text-decoration-thickness: initial !important;
    text-decoration-style: initial !important;
    text-decoration-color: initial !important;
}

浮动（Float）

这些通用类别使用CSS float属性基于目前的视窗大小而向左、向右或禁用浮动。并包含了！important以避免权重问题。float使用与网格系统相同的屏幕断点。请注意，浮动（float）通用类别对于使用flex的元件没有影响。

.float-start {
    float: left !important;
}
.float-end {
    float: right !important;
}
.float-none {
    float: none !important;
}

为响应式添加浮动：

@media (min-width: 576px){
    .float-sm-start {
        float: left !important;
    }
    .float-sm-end {
        float: right !important;
    }
    .float-sm-none {
        float: none !important;
    }
}

@media (min-width: 768px){
    .float-md-start {
        float: left !important;
    }
    .float-md-end {
        float: right !important;
    }
    .float-md-none {
        float: none !important;
    }
}

@media (min-width: 992px){
    .float-lg-start {
        float: left !important;
    }
    .float-lg-end {
        float: right !important;
    }
    .float-lg-none {
        float: none !important;
    }
}

@media (min-width: 1200px){
    .float-xl-start {
        float: left !important;
    }
    .float-xl-end {
        float: end !important;
    }
    .float-xl-none {
        float: none !important;
    }
}

可视性（Visibility）

通过可视性通用类别控制元素的能见度，不需要修改元素的实际空间

使用可视性通用类别设置元素的visibility。这完全不会改变display的值，也不影响布局- .invisible元素仍会占用页面空间。

.visible {
    visibility: visible !important;
}
.invisible {
    visibility: hidden !important;
}

waiting…

本篇完，还有疑问？留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注