http://www.web008.net

如何编写轻量级

什么编写轻量级 CSS 框架

2017/08/08 · CSS · CSS

正文作者: 伯乐在线 - 叙帝利 。未经作者许可,制止转发!
招待参与伯乐在线 专栏审核人。

图片 1

Github:

Demo: 

图片 2

前言

那篇作品作者生机勃勃度酝酿了三个月之久,可能说拖拉了这么久吧。想说的事物重重,却又有魔难言。如今轻量级框架如雨后玉兰片,更仆难数。小编想种种人都应有归咎计算工作中的不足为奇须要,编写豆蔻年华套相符自身的 CSS 框架。在前头的篇章中,作者提到了面向对象的 CSS(比如BEM、OOCSS、SMACSS,详见 卡塔 尔(阿拉伯语:قطر‎。那是风度翩翩种思维,并不关乎具体的 CSS 难题,首假若类命名的政策!以后仍然有许多少人对早先端框架的认知还栖息在表面,认为Bootstrap 是后端职员专项使用,前端没供给等等。小编不亮堂这种说法从何而来,作者最开始也不爱好使用框架,大概和广大人的主见相近,畏惧新知识、惊愕难以精晓、蒙受难题的时候超小概化解等等。最重视的少数是广大人感到框架的样式是定点的,改良起来太难为,还不及本身依照安排图写起来方便。

Github:

Docs: 

为啥使用框架

为何使用框架?答案分明,功用。除了这几个之外,使用框架可能研讨框架的意思还恐怕有为数不菲,比方面向对象观念的求实达成。在上一家商铺做事的时候,开头的多少个体系本人也是用最原始的艺术书写 CSS 。项目里面最让本身高烧的正是类的命名。作者想超越57%人都以基于作用去命名,那就导致了众多的冗余,相仿的零零器件或许写很频仍。轻便举八个事例,如下图,个人基本的登陆界面。

图片 3

许两个人满含自家刚带头的时候可能会筛选下边包车型地铁类命名及布局形式,其通用性很糟糕

JavaScript

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

1
2
3
4
5
6
7
8
<div class="login-area">
    <div class="login-img">
    <img src="..." />
  </div>
    <div class="login-text">
    <a href="...">请点击登录</a>
  </div>
</div>

可是了然 Bootstrap 的人相应一眼就意识上海体育场地就是一个 media 对象,无非一些小细节必要调度一下

JavaScript

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

1
2
3
4
5
6
7
8
<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 文件、混乱的意义划分、类名、色值等等。最终也只能硬着头皮一点一点校正。那一刻作者才心获得框架的含义甚至前端工具的第生机勃勃。小编从工作中计算出,照旧你能够自如的选拔某三个框架,要么就和煦完毕三个框架

前言

那篇小说作者风度翩翩度权衡了五个月之久,可能说拖拖拉拉了这么久吧。想说的东西非常多,却又有祸患言。近来轻量级框架如成千成万,千千万万。作者想每一个人都应该归纳总括职业中的不足为道供给,编写意气风发套符合本人的 CSS 框架。在事先的小说中,笔者关系了面向对象的 CSS(例如 BEM、OOCSS、SMACSS,详见 卡塔尔国。那是意气风发种思维,并不涉及具体的 CSS 难点,主假设类命名的政策!今后依然有众五个人对于前端框架的认知还栖息在外表,以为Bootstrap 是后端人士专项使用,前端没需要等等。作者不明了这种说法从何而来,作者最开首也厌倦使用框架,只怕和成千上万人的主张风华正茂致,畏惧新知识、惊慌难以领悟、碰着难题的时候无法解决等等。最主要的少数是过多个人以为框架的体裁是恒久的,改过起来太费劲,还比不上自身依照规划图写起来方便。

前面二个框架对比

脚下市情上前端框架重要分重量级与轻量级。重量级重点有 Bootstrap、Semantic、UIkit、Foundation 等,轻量级有 Pure、Skeleton、Miligram 等。平日关注前端动态的程序猿会发觉轻量级框架每年一次都成千上万。在自身下面提到的主流轻量级框架之外还应该有为数不菲左近的框架。小编直接问自身,为啥要双重造轮子。经过切磋,小编意识这个轻量级框架其实多数都不可能白手起家专门的学业必要,并且模仿的印迹超重,基本上都或多或少的有 Bootstrap 的黑影。那么这一个轻量级框架有未有意义吗?当然有。然而就本人个人观点,采取轻量级框架反倒不及本人完结贰个框架。因为许多轻量级框架就像职业总计,是依照本身的政工需要完成的。所以基本上不具有通用性。

前面三个框架的对照重要以 Bootstrap、Semantic、UIkit 为主,因为作者个人认为那四个最富有代表性,何况设计风格各有特色。Foundation 也会有众多大集团在用,但以作者个人观点,无论是框架的易用性依然设计风格,比较其余多少个框架略微逊色一些。

里头 Bootstrap 和 Semantic 是面向对象的最佳反映。

本人先说一下 Bootstrap 的优势,不是设计风格,不是模块,不是特效,而是栅格,响应式栅格。Bootstrap 的栅格在与别的框架相比中据有相对优势,无论是栅格的细分或然类名的品格都称得上精华。如若读者有心看一下 Bootstrap 的 Less 源文件,就能体会到 Bootstrap 对于响应式栅格的各具特色。其实在 Bootstrap 早前也可能有为数不少栅格方案,可是给人的以为正是相当不够利索,类名繁缛不佳记。而新兴的过多框架,特别轻量级的框架多数都有Bootstrap 的影子。

上面大家通过比比较多少个框架的栅格和按键来看一下类命名的战略。

Bootstrap

JavaScript

<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>

1
2
3
4
5
6
<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

JavaScript

<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>

1
2
3
4
5
6
<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

JavaScript

<div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div> </div> <button type="button" class="primary button">Primary</button>

1
2
3
4
5
6
<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

JavaScript

<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>

1
2
3
4
5
6
<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

JavaScript

<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>

1
2
3
4
5
6
<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 。项目里面最让本人头痛的正是类的命名。笔者想大多数人都以依附效果与利益去命名,那就造成了大多的冗余,相仿的零器件恐怕写很频仍。轻便举一个例子,如下图,个人基本的登陆界面。

图片 4

无数人包括本身刚早先的时候可能会选拔下边的类命名及布局方式,其通用性相当差

<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 文件、混乱的机能区划、类名、色值等等。最终也不能不硬着头皮一点一点改过。那一刻小编才心获得框架的意思以致前端工具的入眼。笔者从办事中总计出,要么你能够熟习的使用某多少个框架,要么就和好达成七个框架

关于 CSS 预微型机

CSS 预微处理器早就不是怎样新鲜事,不过真正能够在职业中运用的人某些许吧?熟知使用预微处理器天性的人又有稍许吗?

自身事先工作的时候也尚无用预微机,因为不用,所以也发觉不到预微处理器的实惠。首借使认为费力,因为要选取编写翻译器编写翻译一下,还不及直接写 CSS 方便。但是在项目维护的时候就意识到预微处理器的利润。后来在多少个品类中品尝了预微处理机,可是对于模块化的写法不太显眼。预微型机作为工具,可以兑现模块化编写 CSS,那么相应如何划分模块?其它,预微电脑有一些不清特点,不过超过六分之三人刚伊始只用到变量和嵌套,别的的特点差不离少之甚少用到。笔者相信在大团结出手完毕一个轻量级框架的历程中,我们得以对预微处理机有三个兼备的问询。

方今风靡的预微型机有 Less,Sass,Stylus 多个,采用哪个完全都是看自个儿的习贯。笔者最开始因为 Bootstrap 理解的 Less,不过因为习惯采取了 Sass,其次 Sass 的作用要更完备一些。

不管专门的学问照旧友好写项目,都要搭建一个品种条件,也正是设置风姿洒脱多元的 npm 包。相比相当的红耨刀耕的开荒形式,使用工具开采的前期希图进度稍显麻烦,然则要是情况建好,早先时期的花费将会百步穿杨。

Miligram 这几个轻量级框架在 Github 上有异常高人气,但是说真话,用场并非常的小。可是那一个框架的营造情势要命值得学习。尽管CSS 对于众多个人俩说非常粗大略,可是真要去写三个框架,照旧那么些吃力,那个时候就须要前车之鉴一些优异的框架。

编写制定框架大约会用到的 npm 如下:

JavaScript

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

1
2
3
4
5
--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchange

骨子里最重视的正是一个 node-sass,此外的都是支持 CSS 文件的改造改善,我们感兴趣的话能够去 npm 官方网站寻觅那些插件,明白实际用法,如有不懂能够给自家留言,我就不啰嗦了。

前端框架相比

一时一刻市道上前端框架首要分重量级与轻量级。重量级重视有 Bootstrap、Semantic、UIkit、Foundation 等,轻量级有 Pure、Skeleton、Miligram 等。平时关怀前端动态的程序猿会发掘轻量级框架每一年都成千上万。在本身上边提到的主流轻量级框架之外还也许有相当多像样的框架。笔者间接问自身,为何要重新造轮子。经过切磋,笔者发觉这几个轻量级框架其实许多都不能自立门户职业急需,並且模仿的划痕非常重,基本上都或多或少的有 Bootstrap 的影子。那么那么些轻量级框架有未有意义吗?当然有。不过就自己个人观点,选择轻量级框架反倒比不上自个儿实现四个框架。因为许多轻量级框架就好像职业计算,是依靠自身的业必须要落成的。所以基本上不抱有通用性。

前面二个框架的对峙统生龙活虎首要以 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 的政策相仿,都加了前缀以界别其余框架,不过很显著类名过于冗长了。小编在编排框架时也如此想过,然而最终废弃了这种办法。

编写制定轻量级框架

好不轻便到了本篇小说的着珍视。

简轻便单介绍一下,我给本人编排的框架取名 Snack,原意“零食”,首要表明轻巧之意。纵然是轻量级框架,但小编并不想拿轻量级做为噱头,终归体积轻意味着有些意义的缺少以至脱漏。那些框架的意义越来越多的是沟通学习,我计划借鉴定区别的框架的卓绝之处,尽量简化类名,以致尝试探寻一些更通用的组件。

多数的轻量级框架只是 CSS 框架,不关乎 JS 部分,首要用以网页的布局。作者于是筹划本身编辑框架,是因为做事中另行的事物太多,通过框架能够很好的将这个散装组件整合到同盟。另一面,写个小项目,学点新知识是意气风发件有趣的事。

编写框架是2018年想做的业务,但因为时间原因,拖了十分久。写框架之初作者曾深陷二个误区,小编筹划规划有个别相比较风尚的样式,立体的开关、浮动的面板等,譬如下图中的风格。

图片 5

可是在相对续续编写框架的历程中,笔者稳步找到了系列化,上海体育场面的体裁只是意气风发种四肢,编写框架之初不该把第生机勃勃放在这里上头。当然,好的 UI 设计也是框架成功的意气风发有的。

关于 CSS 预微处理器

CSS 预微处理机早就不是怎么新鲜事,可是真正能够在职业中运用的人有多少啊?熟习使用预微型机性情的人又有微微呢?

本身此前职业的时候也未尝用预微型机,因为不用,所以也发现不到预微处理器的好处。重借使感觉麻烦,因为要使用编写翻译器编写翻译一下,还比不上直接写 CSS 方便。可是在品种尊崇的时候就发掘到预微处理机的实惠。后来在几个类型中品尝了预微处理器,但是对于模块化的写法不太显著。预微处理机作为工具,能够完结模块化编写 CSS,那么应该怎么着分割模块?此外,预微处理机有为数不菲天性,不过非常多人刚开始只用到变量和嵌套,此外的风味大概超少用到。笔者言从计听在温馨入手实现三个轻量级框架的长河中,我们能够对预微机有贰个周密的询问。

一时风靡的预微机有 Less,Sass,Stylus 七个,选用哪位完全部是看自身的习于旧贯。作者最起初因为 Bootstrap 明白的 Less,不过因为习于旧贯选用了 Sass,其次 Sass 的效用要更完美一些。

无论是职业恐怕友好写项目,都要搭建叁个等级次序条件,也正是设置豆蔻梢头俯拾都已的 npm 包。比较刀耕火耨的开荒情势,使用工具开辟的后期策画进度稍显麻烦,但是固然情状建好,前期的开支将会卓殊了解。

Miligram 那么些轻量级框架在 Github 上有相当高人气,可是说实话,用途并相当小。但是这么些框架的营造情势要命值得学习。就算CSS 对于广大人的话不会细小略,不过真要去写三个框架,还是那三个费事,那时就必要前车可鉴一些赏心悦指标框架。

编写制定框架大概会用到的 npm 如下:

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

骨子里最重视的正是七个 node-sass,别的的都是帮扶 CSS 文件的转移更改,大家感兴趣的话能够去 npm 官方网站寻找这个插件,明白实际用法,如有不懂能够给自个儿留言,作者就不啰嗦了。

模块划分

编排框架的首先步正是要鲜明框架应该包括怎样模块。因为是轻量级框架,所以模块明确未有轻重级框架那么完美,唯有基本的一些构件。通过相比较一些轻量级框架以致职业总计,大约常用的模块包蕴栅格、媒体、按键、制版、表单、表格、面板以致协助工具。

在常用的那多少个零件中,供给重视关怀的是栅格、表单及面板,媒体组件也很主要,然而自由发挥的空中一点都不大,我一向用了 Bootstrap 的传播媒介组件。

编辑轻量级框架

终于到了本篇文章的重心。

简易介绍一下,笔者给本身编排的框架取名 Snack,原意“快餐”,首要表明轻易之意。即使是轻量级框架,但自身并不想拿轻量级做为噱头,毕竟体量轻意味着某个效率的缺乏以致脱漏。这几个框架的意思更多的是沟通学习,笔者计划借鉴定区别的框架的非凡之处,尽量简化类名,以至尝试探究一些更通用的构件。

超过八分之四的轻量级框架只是 CSS 框架,不关乎 JS 部分,首要用以网页的布局。我为此准备自身编辑框架,是因为职业中再一次的事物太多,通过框架可以很好的将这几个散装组件整合到一齐。其他方面,写个小品种,学点新知识是大器晚成件遗闻。

编写制定框架是2018年想做的事情,但因为时间原因,拖了相当久。写框架之初小编曾深陷七个误区,小编希图规划有个别相比较时尚的体制,立体的按键、浮动的面板等,举个例子下图中的风格。

图片 6

而是在相对续续编写框架的长河中,作者渐渐找到了方向,上海体育场所的样式只是后生可畏种皮肤,编写框架之初不应有把第生机勃勃放在这里上头。当然,好的 UI 设计也是框架成功的一片段。

取名战术

首先是类命名的档次与构造。类命名一直是自家相比纠结的地点,刚开首工作的时候为了起多少个见名知意又简单的类名总是左顾右盼。作者在编辑框架时尽量防止与 Bootstrap 的类名重叠,但也不可能完全幸免。相比其余框架会发觉,这种气象不可幸免的会不由自主,毕竟类名会有早晚的规律性以致档次性。在此一点上本人相比较欣赏Bootstrap 的风骨。下边和 Bootstrap 的表单做贰个比照。

Bootstrap 的表单结构及类名

JavaScript

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

1
2
3
4
--div.form-horizontal
  --div.form-group
    --label.control-label
    --input.form-control

Snack 的表单结构及类名

JavaScript

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

1
2
3
4
--div.form-row
  --div.form-item
     --label.form-label
     --input.form-field

本条表单结构全部来讲还算不错,只是分别地方须要改善。有意气风发部分框架不给 input 等因素起类名,而是给父成分贰个类名,个人对这种做法表示疑问,不起类名会裁减框架编写及接纳的油滑。

其次个政策是组件的梳洗,举个例子按键及面板都设有几个语境(颜色、大小等卡塔尔国,在此或多或少上本人编写框架时做了有个别简化,风格上稍加 Semantic 的影子。

JavaScript

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

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

有关修饰类的政策是三个仁者见仁智者见智各执己见的难题,至于哪个种类办法越来越好,还必要在编制框架的长河中搜寻。

模块划分

编纂框架的率先步即是要规定框架应该包括怎么着模块。因为是轻量级框架,所以模块断定未有轻重级框架那么完美,唯有着力的风姿浪漫部分零件。通过相比一些轻量级框架以至专业计算,大概常用的模块包括栅格、媒体、开关、排版、表单、表格、面板以致帮忙工具。

在常用的那多少个零件中,须求入眼关切的是栅格、表单及面板,媒体组件也很主要,但是自由发挥的空间一点都不大,小编直接用了 Bootstrap 的传播媒介组件。

 

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。