更新记录

1.0.1(2020-01-14)

规定box-sizing:border-box

1.0.0(2020-01-14)

新建项目

查看更多

markrgba-css

一款语义化的CSS基础库

  • 声明:

    本库并无多少技术含量,仅由个人使用习惯而设计,请根据自身项目酌情使用。

  • 特性:

    1. 样式属性语义化为ClassName,实现样式解耦,自由组合。
    2. 可根据业务需求自行维护,打造属于自己的css基础库
    3. 支持按需引入,减小项目体积
    4. 提供css批量生成工具,快速生成CSS代码

详细文档传送门markrgba-css

安装

  • 在工程中安装:
npm i markrgba-css-rpx 
  • 在main.js中引入:
//全部引入
import './node_modules/markrgba-css-rpx/index.css'
  • 按需引入:
//按需引入
import './node_modules/markrgba-css-rpx/css/layout.css' //只引入布局
import './node_modules/markrgba-css-rpx/css/font.css' //只引入文字
import './node_modules/markrgba-css-rpx/css/color.css' //只引入颜色
import './node_modules/markrgba-css-rpx/css/margin.css' //只引入外边距
import './node_modules/markrgba-css-rpx/css/padding.css' //只引入内边距
import './node_modules/markrgba-css-rpx/css/border.css' //只引入边框
import './node_modules/markrgba-css-rpx/css/other.css' //只引入其它

使用

  • 在你的vue文件中
<view class="p-all-32">
    <view class="c-999 fs-32 pl-32">
        一款语义化的CSS基础库
    </view>
</view>

原理解析

  • 我们先来看一个内联样式的例子:
<view>
    <view style="width:500rpx;height:250rpx;padding-top:20rpx;font-size:28rpx border-radius:20rpx">
        一个box
    </view>
</view>
  • 内联样式的好处是自由修改,无需去翻找className对应的样式。但,过多的内联样式会让Html非常臃肿。我们来看看markrgba-css干了什么:
<view>
    <view class="w-500 h-250 pt-20 fs-28 br-20">一个box</view>
</view>
  • 可见,markrgba-css做的工作很简单,将样式属性抽离为语义化的className,继承了内联样式的方便,可自由组合,同时精简代码。但这么做并不是一劳永逸的,如果遇上元素重复使用的情况,弊端显现,如下:
<view>
    <view class="w-500 h-250 pt-20 fs-28 br-20">一个box</view>
    <view class="w-500 h-250 pt-20 fs-28 br-20">一个box</view>
    <view class="w-500 h-250 pt-20 fs-28 br-20">一个box</view>
    <view class="w-500 h-250 pt-20 fs-28 br-20">一个box</view>
    <view class="w-500 h-250 pt-20 fs-28 br-20">一个box</view>
</view>
  • 还是不够简洁,怎么办?解决办法就是将重复使用的className组合为字符串变量。如下:
<view>
    <view :class="c_box">一个box</view>
    <view :class="c_box">一个box</view>
    <view :class="c_box">一个box</view>
    <view :class="c_box">一个box</view>
    <view :class="c_box">一个box</view>
</view>
//======局部抽离=======
export default {
  data() {
    return {
        c_box:'w-500 h-250 pt-20 fs-28 br-20'
    }
  }
}

//======全局抽离=====

//main.js 
Vue.prototype.c_box='w-500 h-250 pt-20 fs-28 br-20'
  • 建议在样式已定型不需要频繁修改,且超过5个className组合的情况下再行抽离,否则就失去了本css库的设计初衷。为避免与其它变量冲突,变量命名前缀约定为c_,详细文档传送门markrgba-css

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问