怎么着编写轻量级 CSS 框架

图片 1

Github: https://github.com/nzbin/snack

Docs: https://nzbin.github.io/snack

前言

那篇文章作者曾经掂量了五个月之久,可能说拖沓了这么久吧。想说的事物重重,却又无从说起。方今轻量级框架如星罗棋布,习以为常。小编想每种人都应土当总结计算工作中的常见需要,编写一套适合自身的
CSS 框架。在事先的篇章中,作者提到了面向对象的 CSS(比如 BEM、OOCSS、SMACSS,详见
http://vanseodesign.com/css/dry-principles/)。那是一种构思,并不关乎具体的
CSS
难点,紧假使类命名的方针!未来依旧有好四人对于前端框架的认识还栖息在表面,认为
Bootstrap
是后端人士专用,前端没要求等等。作者不晓得那种说法从何而来,作者最开头也不爱好使用框架,可能和广大人的想法一致,畏惧新知识、害怕难以明白、碰着标题标时候不能化解等等。最根本的一点是不可计数人觉得框架的体裁是定点的,修改起来太费事,还不如本人依据设计图写起来方便。

为何使用框架

为何采用框架?答案明了,作用。除此之外,使用框架或然研商框架的意思还有不少,比如面向对象思想的切实完毕。在上一家店铺做事的时候,起始的多少个连串本人也是用最原始的方式书写
CSS
。项目里面最让作者头痛的就是类的命名。作者想半数以上人都是依照效益去命名,那就造成了累累的冗余,相同的机件或许写很频仍。简单举二个例证,如下图,个人焦点的记名界面。

图片 2

重重人包罗自我刚伊始的时候只怕会挑选下边的类命名及布局方式,其通用性极度差

<div class="login-area">
    <div class="login-img">
    <img src="..." />
  </div>
    <div class="login-text">
    <a href="...">请点击登录</a>
  </div>
</div>

然则通晓 Bootstrap 的人应有一眼就意识上图就是多个 media
对象,无非一些小细节要求调动一下

<div class="media">
    <div class="media-left">
        <img src="..." />
    </div>
    <div class="media-body media-middle">
        <a href="...">请点击登录</a>
    </div>
</div>

为了让文字与图片居中对齐,大家得以行使 Bootstrap 的 .media-middle
的赞助类。即便在工作中还要依据要求自定义一些协理类调整细节,当然那是三个活动端的例子,可以选取移动端框架相关的
media 对象。

除此以外,在项目改版的时候,原始的法子的改动更是惨不忍睹,可以说是噩梦,冗长的
CSS
文件、混乱的效率划分、类名、色值等等。最终也不得不硬着头皮一点一点修改。那一刻小编才体会到框架的含义以及前端工具的最主要。作者从办事中计算出,抑或你可以熟习的选取某三个框架,要么就协调完成二个框架

前端框架比较

近年来市面上前端框架首要分重量级与轻量级。重量级重点有
Bootstrap、塞马ntic、UIkit、Foundation 等,轻量级有
Pure、Skeleton、Miligram
等。平常关心前端动态的工程师会意识轻量级框架每年都不以为奇。在自家下边提到的主流轻量级框架之外还有很多近似的框架。小编间接问自身,为啥要重新造轮子。经过讨论,作者发现这几个轻量级框架其实大多都不只怕胜任工作需要,而且模仿的印痕很重,基本上都或多或少的有
Bootstrap
的影子。那么那一个轻量级框架有没有含义呢?当然有。然而就笔者个人观点,选取轻量级框架反倒不如自个儿达成3个框架。因为几乎轻量级框架似乎工作计算,是依据本人的事务要求已毕的。所以基本上不具有通用性。

前端框架的比较首要以 Bootstrap、Semantic、UIkit
为主,因为本人个人感觉这多个最富有代表性,而且设计风格各有特色。Foundation
也有那些大商店在用,但以自己个人观点,无论是框架的易用性还是设计风格,相比其他多少个框架稍逊一筹。

其间 Bootstrap 和 Semantic 是面向对象的最好反映。

自身先说一下 Bootstrap
的优势,不是统筹风格,不是模块,不是特效,而是栅格,响应式栅格。Bootstrap
的栅格在与其余框架比较中占据相对优势,无论是栅格的撤并或许类名的品格都堪称经典。如若读者有心看一下
Bootstrap 的 Less 源文件,就会感受到 Bootstrap
对于响应式栅格的匠心独运。其实在 Bootstrap
在此之前也有许多栅格方案,不过给人的感觉到就是不够利索,类名繁琐不好记。而新兴的居多框架,越发轻量级的框架大多都有
Bootstrap 的阴影。

上面我们通过相比较多少个框架的栅格和按钮来看一下类命名的方针。

Bootstrap

<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>

<button class="btn btn-primary" type="submit">Button</button>

Semantic

<div class="ui grid">
  <div class="ten wide column"></div>
  <div class="six wide column"></div>
</div>

<button class="ui primary basic button">Primary</button>

Foundation

<div class="row">
  <div class="small-3 columns"></div>
  <div class="small-9 columns"></div>
</div>

<button type="button" class="primary button">Primary</button>

UIkit

<div class="uk-grid">
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>

<button class="uk-button uk-button-primary" type="button">Primary</button>

Pure

<div class="pure-g">
    <div class="pure-u-1-2"></div>
    <div class="pure-u-1-2"></div>
</div>

<button class="pure-button pure-button-primary">A Primary Button</button>

通过上边的对待,大家应该早就发现了那个框架的命名策略的不比。不可以依然不可以认,Bootstrap
的命名最经典。

前边在网上看看有人议论有关框架的易用性,有人说 Bootstrap
的类名太长,然则透过地点多少个框架的周旋统一,Bootstrap
的类并不麻烦,而且用预处理器编写框架时嵌套会比较灵活。

Semantic
的类名最精简,通过两个定语的梳洗组成一句话,确实很有意思。可是过多的修饰类在编辑框架时会稍显凌乱,有利有弊,仁同一视吧。

Foundation 的栅格应该是最丰硕的,策略上类似
Bootstrap,只是对公私属性举行了拆分,大家也可以看看里面的具体细节。

UIkit 和 Pure
的政策相同,都加了前缀以界别其余框架,然则很显眼类名过于冗长了。笔者在编辑框架时也这么想过,但是最后放弃了这种艺术。

关于 CSS 预处理器

CSS
预处理器早已不是什么样新鲜事,不过的确可以在工作中运用的人有微微吧?熟知运用预处理器本性的人又有稍许吗?

本身从前工作的时候也远非用预处理器,因为不用,所以也意识不到预处理器的功利。重假诺认为忙绿,因为要选用编译器编译一下,还不如直接写
CSS
方便。但是在项目体贴的时候就发现到预处理器的便宜。后来在多少个门类中品尝了预处理器,不过对于模块化的写法不太明朗。预处理器作为工具,能够兑现模块化编写
CSS,那么相应怎么分割模块?其它,预处理器有广大表征,不过超过一半人刚起头只用到变量和嵌套,其余的特点大概很少用到。小编深信不疑在大团结出手达成1个轻量级框架的历程中,大家得以对预处理器有三个完美的垂询。

此时此刻流行的预处理器有 Less,Sass,Stylus
三个,选用哪个完全是看自个儿的习惯。笔者最开首因为 Bootstrap 驾驭的
Less,不过因为习惯拔取了 Sass,其次 Sass 的功用要更健全一些。

随便工作或然本身写项目,都要搭建贰个品种环境,也等于设置一多元的 npm
包。比较刀耕火种的开发方式,使用工具开发的早期准备进程稍显麻烦,然则一旦环境建好,后期的费用将会游刃有余。

Miligram 那么些轻量级框架在 Github
上有很高人气,不过说实话,用处并不大。然而那么些框架的营造格局尤其值得学习。纵然CSS
对于许多个人来说很简短,可是真要去写三个框架,还是那些劳累,那时候就需求引以为戒一些特出的框架。

编制框架大致会用到的 npm 如下:

--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchange

实际最重大的就是三个 node-sass,其余的都是接济 CSS
文件的变化修改,大家感兴趣的话可以去 npm
官网搜索那些插件,精晓实际用法,如有不懂可以给本人留言,小编就不啰嗦了。

编写轻量级框架

终归到了本篇文章的主脑。

简言之介绍一下,作者给自身编写的框架取名
Snack,原意“快餐”,主要表明不难之意。即便是轻量级框架,但自个儿并不想拿轻量级做为噱头,终究体积轻意味着有些职能的不够以及疏漏。那么些框架的含义愈多的是互换学习,作者打算借鉴其他框架的特出之处,尽量简化类名,以及尝试探索一些更通用的零件。

半数以上的轻量级框架只是 CSS 框架,不涉及 JS
部分,首要用来网页的布局。小编因而打算自个儿编辑框架,是因为工作中重复的事物太多,通过框架可以很好的将这一个零碎组件整合到一同。另一方面,写个小项目,学点新知识是一件趣事。

编写框架是二〇一八年想做的政工,但因为时间原因,拖了很久。写框架之初作者曾陷入1个误区,小编打算规划有个别相比风尚的样式,立体的按钮、浮动的面板等,比如下图中的风格。

图片 3

https://dribbble.com/shots/524593-Soft-Interface-Black

不过在绝对续续编写框架的长河中,笔者逐步找到了大方向,上图的样式只是一种皮肤,编写框架之初不应当把重点放在那方面。当然,好的
UI 设计也是框架成功的一有些。

模块划分

编写框架的首先步就是要规定框架应该包涵如何模块。因为是轻量级框架,所以模块肯定没有轻重级框架那么完美,只有着力的部分零件。通过相比较一些轻量级框架以及工作总计,大约常用的模块蕴含栅格、媒体、按钮、排版、表单、表格、面板以及接济工具。

在常用的这多少个零件中,须求重视关切的是栅格、表单及面板,媒体组件也很关键,然则自由发挥的空中不大,小编从来用了
Bootstrap 的媒体组件。

 

命名策略

先是是类命名的层次与结构。类命名平昔是自家相比纠结的地点,刚开头工作的时候为了起三个见名知意又不难的类名总是无可奈何。小编在编制框架时尽量幸免与
Bootstrap
的类名重叠,但也无法完全防止。比较其余框架会意识,那种景况不可防止的会师世,终归类名会有肯定的规律性以及层次性。在那点上本人相比较欣赏
Bootstrap 的风骨。上边和 Bootstrap 的表单做3个相对而言。

Bootstrap 的表单结构及类名

--div.form-horizontal
  --div.form-group
    --label.control-label
    --input.form-control

Snack 的表单结构及类名

--div.form-row
  --div.form-item
     --label.form-label
     --input.form-field

本条表单结构全部而言还算不错,只是分别地点要求修改。有局地框架不给
input
等因素起类名,而是给父成分1个类名,个人对那种做法表示疑问,不起类名会下落框架编写及利用的油滑。

第二个政策是组件的修饰,比如按钮及面板都设有三个语境(颜色、大小等),在那或多或少上自小编编写框架时做了一些简化,风格上稍加
Semantic 的黑影。

<button class="btn primary">primary</button>
<table class="table bordered striped">...</table>
<div class="boxes primary">...</div>

至于修饰类的方针是三个各执一词各抒所见的题材,至于哪类方法更好,还索要在编写框架的进程中找寻。

栅格系统

演示示例: https://nzbin.github.io/snack/#grid

其他框架必须树立在栅格的根基上才能灵活布局。小编在前头提到了 Bootstrap
的美丽就是栅格系统。栅格系统的编排须求使用预处理器的巡回功效,否则就要做无谓的重复劳动了。笔者碰到过一些轻量级框架是用
Less 编写的,其栅格系统就从未有过用循环,那样的源码稍显唐突,大概是小编对
Less 的巡回功用不熟,当然 Less
本人的循环相比弱,用起来某些别扭。关于预处理器的大循环,能够参考小编事先翻译的
CSS
预处理器中的循环
》,相比详细地对待了二种流行预处理器的巡回作用。简单说一下,Less
没有循环,但可以用递归已毕,而 Sass 和 Stylus 有真循环。

本身编写的栅格系统也是暗中同意 12 列,然则后来意识 12
列的栅格缺少最常用的列宽(比如 一成、十分二、三成等),比如上面 CodePen
显示的例子用 12 列栅格是心有余而力不足形成的,所以我又添加了 10
列栅格,但依旧无法左右逢源,不过已经很灵活了。

See the Pen snack-grid by
Zongbin (@nzbin) on
CodePen.

栅格的运用和 Bootstrap 是同等的,除了 12 列栅特出,10
列栅格以及均分栅格都要添加 .cols-

<!-- 默认 12 列栅格,所以省略 cols-12 -->
<div class="row">
    <div class="col-5"></div>
    <div class="col-7"></div>
</div>

<!-- 10 列栅格 -->
<div class="row cols-10">
    <div class="col-3"></div>
    <div class="col-7"></div>
</div>          

那么些栅格并没有响应式,唯有三个断点,小屏手机上的话全体栅格都会单行突显。一方面,那样的安插适合半数以上轻量级框架的初衷;另一方面,我打算再写三个针对性移动端的框架,终归Web
端和移动端的风格差距较大,依照作业须要分开会更好。可是近年来本人改变了源文件,为响应式预留了扩展格局。

表单

示范示例: https://nzbin.github.io/snack/#forms

在上边的命名策略中早已显得了 Snack
表单的骨干协会,基本表单除了结构之外,样式上并没有太多可以探讨的地点。在此说一下表单中
checkbox 的结构调整,先看一下 Bootstrap 的 checkbox 结构。

<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

<!-- checkbox-inline  -->
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox
</label>

上述两种结构不可以有偏差,稍有偏差样式就会混杂,灵活性较差。其次作者在想三种结构能不可能结合在一块儿,增强灵活性。想了很久,找到了法子,Snack
结构如下:

<!-- checkbox -->
<div class="checkbox">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

<!-- checkbox-inline -->
<div class="checkbox inline">
  <label>
    <input type="checkbox" value=""> checkbox
  </label>
</div>

也可以将样式直接加到 label 标签上。另外,如果将 input 移到 label
标签外也是没有失水准的,如下:

<!-- checkbox -->
<div class="checkbox">
  <input type="checkbox" id="checkbox1" value="">
  <label for="checkbox1">checkbox</label>
</div>

<!-- checkbox-inline -->
<div class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="">
  <label for="inlineCheckbox1">checkbox</label>
</div>

那种布局有二个益处,就是足以自定义 input 样式,详见上面的 CodePen 的
scss 文件。radio 的装置和 checkBox 是一模一样的。

See the Pen snack-forms by
Zongbin (@nzbin) on
CodePen.

 

辅助类

扶助类是一文山会海类的组合,比如字号大小、颜色值、padding、margin
以及左右浮动等。在有的 Bootstrap
搭建的后台管理连串中国和越南来越常见,那样布局起来就会比较灵活。以下是一个边框的支援类。

.border-left-right {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.border-top-bottom {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.border-left {
  border-left: 1px solid #eee;
}
.border-right {
  border-right: 1px solid #eee;
}
.border-top {
  border-top: 1px solid #eee;
}
.border-bottom {
  border-bottom: 1px solid #eee;
}

至于辅助类的更加多内容可以翻阅那篇小说《什么样编写通用的 Helper
Class

盒组件

以身作则示例: https://nzbin.github.io/snack/#boxes

盒组件是本身整个框架中相比较满足的五个模块。之所以要做那一个组件重假使认为
Bootstrap 的 list 组件和 panel
组件能够构成到3头。当然,那样的做法有利有弊。盒组件在后台管理种类的布局中显现的一发优良。其命名也是五花八门,比如
panel、widget、portlet、ibox、card等,每种后台管理连串框架都会对这些组件举办深度开发,可知其在布局上的主要。给一个零部件起一个适当的类名也很要紧,想了很久,最后用了
box 的类名,当然一般景色下尽只怕不要用
box,因为这几个类名相比宽泛。上面的 CodePen 模拟了 Bootstrap 的 list 及
panel 组件。

See the Pen snack-boxes by
Zongbin (@nzbin) on
CodePen.

 

主题

给框架添加宗旨是一件有趣的作业。Snack
的暗中同意主旨是反动,因为喜欢米黄,最后添加了暗夜大旨,编写主旨只需变更组件的水彩。以身作则文档
的页面用了暗夜主旨,点击上方的甲子革命按钮可以切换焦点。

总结

比方大家问作者万分框架更好,小编会不暇思索的选项
Bootstrap。在工作中可以根据必要的难易举办框架拔取,尽管事情比较重,最好依照Bootstrap
进行1回开发;反之,可以选取部分轻量级框架,最好依旧基于本身的须求造轮子,尽管大家愿意采纳或者借鉴小编的框架,那会是自身的荣誉。

相关文章