CSS 自定义属性在Web组件中的应用

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天我们不聊什么是CSS自定义属性,而把重点放在CSS自定义属性在组件中怎么使用,她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中,我们主要会探讨CSS自定义属性为Web组件服务,以及怎么利用CSS自定义属性来维护组件。

设计背景

Web组件的设计对于Web从业人员来说是最常见的一部分了,随着JavaScript框架到来,除了给我们为组件设计带来了红利,但也给我们造成一定的约束性。比如说,我们设计的一个Web组件,应该提供什么样的方式给Web开发人员使用是最佳的姿势。不管是CSS方法论的基础上设计的UI组件,还是基于JavaScript框架上(比如Vue、React)设计的UI组件,在提供给开发者使用上来说还是存在一定的约束性。或者说可扩展性并不是非常的灵活。这也是令很多设计Web组件的同学来说头痛的地方,也在致力解决的一个点。

值得幸运的是,CSS Houdini的出现,给Web组件的设计带来了一些灵感,至少我在这方面得到较强的设计灵感。接下来,我们来阐述CSS Houdini给Web组件的设计带来什么灵感?感兴趣的同学请继续往下阅读。

CSS Houdini给组件带来的扩展性

在《提示框组件的实现给我带来的思考和探索》一文中的结尾处向大家演示了如何通过CSS Houdini来设计一个Tooltips的组件

同时给大家留下一个还需要继续探讨的话题:

如何将CSS自定义属性运用于Web组件中,来构建一个复用性,灵活性和可扩展性更强的Web组件

设计稿中的组件

接下来先拿一个最简单的组件来举例。在讲故事之前,我们先来看设计稿中对某个组件的理解,比如按钮(即Button

从Sketch设计面板上可以看到,对按钮在UI上有影响的属性,如果拿CSS来对比的话,可能会有:

  • 宽度 ─➤ width
  • 高度 ─➤ height
  • 边框 ─➤ border
  • 圆角 ─➤ border-radius
  • 阴影 ─➤ box-shadow
  • 背景 ─➤ background (可能是background-image,也可能是background-color
  • 字体 ─➤ font (比如font-size)
  • 文本颜色 ─➤ color

其中一些属性是用于UI风格(比如border-colorcolorbackgroundbox-shadow),一些属性是用于UI大小(比如widthheightborder-widthfont-size)。如果我们把这些都声明成一个自定义属性(可灵活调整):

--backgroundColor: #F2F3F7
--borderColor: #C4C6CF
--borderRadius: 3px
--fontSize: 16px
--color: #333
--padding: 5px 10px

CSS Framework中的UI组件

在社区中CSS Framework有很多,比如大家熟悉的Bootstrap就是其中之一,就我个人而言一直喜欢这个CSS框架。在Bootstrap中有很多UI组件,同样拿按钮来举例:

就上图而言,整个Bootstrap在设计UI组件的时候也采用了一些CSS方法论。2019年的CSS报告中统计了社区中常用的一些CSS方法论

有关于2019年CSS报告中更有趣的东西,可以阅读《从9102年的CSS状态报告中看CSS特性的使用》一文。

Bootstrap中就使用了OOCSS的相关特性。比如按钮他有一个基类btn,然后有一个扩展类btn-primary

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

其他风格的按钮也是采用类似方式实现的。可以说,这种设计UI组件的方式是个古老的方式。

如果你对CSS方法论感兴趣的话,可以花点时间阅读《写CSS的姿势》一文。

CSS自定义属性给UI组件带来的变革

这些年CSS的技巧在不断的革新,特别是近几年,可以说是一种飞跃性的发展。其中CSS 自定义属性的进展就足以令我们目瞪口呆,发展神速

CSS的自定义属性给UI组件的设计带来更多的灵活性。

从设计软件中我们可以获知,设计的任何UI组件,都有很多参数可以用来控制组件的样式风格,比如说大小,皮肤等。而这些参数就可以和CSS自定义属性匹配起来。

继续拿Button来举例,我们可以在基类中声明按钮UI所需的参数,比如:

.button {
    // 声明CSS自定义属性
    --backgroundColor: #fff;
    --borderColor: #ccc;
    --borderRadius: 5px;
    --fontSize: 16px;
    --color: #333;
    --padding: 5px 10px;

    // 按钮的基本样式
    display: inline-flex;
    justify-content: center;
    align-items: center;

    // 调用CSS自定义属性
    background: var(--backgroundColor);
    border: 1px solid var(--borderColor);
    color: var(--color);
    font-size: var(--fontSize);
    padding: var(--padding);
    border-radius: var(--borderRadius);
}

效果如下:

其中--padding--fontSize用来控制按钮大小;--backgroundColor--color--borderColor--borderRadius用来控制按钮的皮肤。如果我们需要其他风格的按钮时,我们可以这样使用:

<!-- HTML -->
<div class="button primary" role="button">Primary Button</div>
<div class="button danger large" role="button">Danger && Large Button</div>

// CSS
.primary {
    --backgroundColor: #007bff;
    --borderColor: #007bff;
    --color: #fff;
}

.danger {
    --color: #fff;
    --backgroundColor: #dc3545;
    --borderColor: #dc3545;
}

.large {
    --padding: .5rem 1rem;
    --borderRadius: .3rem;
    --fontSize: 1.25rem;
}

看到上面的示例,你可能会问为什么不显式的设置widthheight来控制按钮的大小呢?就我个人经验来说,能不显式设置widthheight来控制元素大小就尽量不要使用,就算是要设置,也更应该考虑min-widthmin-height这样的属性。另外在CSS中,还有更为灵活来控制元素在大小的属性,即min-content()max-content()fit-content()函数和fill-availablewidth的一个属性值)等。有关于这几个函数的使用可以阅读W3C的CSS Intrinsic & Extrinsic Sizing Module Level 3规范或者@张鑫旭大师的《理解CSS3 max/min-contentfit-contentwidth》一文。

另外为了更好的向大家演示CSS自定义属性给UI组件带来的灵活性和可维护性,下面一个示例,借助CSSOM中的CSSStyleDeclaration中的setProperty()getPropertyValue()方法来重构一个CSS自定义属性构建的UI组件:

操作右侧表单项,就可以轻易的控制按钮的样式风格:

CSS自定义属性在Vue组件中的应用

时至今日,仅基于CSS来构建UI的场景越来越少了。随着类似Vue和React这样的优秀框架的诞生,在组件构建方面大部分都基于这两大体系。接下来就和大家一起探讨CSS自定义属性怎么在JavaScript框架中来构建组件。

同样拿Button组件来举例。在Vue的项目中构建一个Button组件,在样式的构建和维护上同样使用CSS自定义属性:

// Button.vue
<template>
    <div class="button">{{ text }}</div>
</template>

<script>
export default {
    name: 'Button',
    props: {
        text: String
    }
}
</script>

<style scoped>
    .button {
        --backgroundColor: #fff;
        --borderColor: #ccc;
        -
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-custom-propery-in-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部