安编写轻量级 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、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
的政策相同,都加以了前面缀以分别外框架,但是生肯定类名过于冗长了。我在编辑框架时也如此想过,但是最后放弃了这种办法。

至于 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
官网搜索这些插件,了解具体用法,如发生免亮可以叫自己留言,我哪怕未啰嗦了。

编制轻量级框架

毕竟到了本篇文章的重头戏。

简简单单介绍一下,我叫好编排的框架取名
Snack,原意“快餐”,主要表达简单的完全。虽然是轻量级框架,但自连无思量以轻量级做呢噱头,毕竟体量轻意味着某些意义的不够和疏漏。这个框架的意义更多之是交流学习,我打算借鉴其他框架的脍炙人口之处在,尽量简化类名,以及尝试探索有再通用的组件。

大多数底轻量级框架只是 CSS 框架,不干 JS
部分,主要用来网页的布局。我为此打算自己修框架,是坐做事负重复的东西最多,通过框架可以非常好的拿这些碎片组件整合及一起。另一方面,写单稍品种,学点新知识是相同起趣事。

编制框架是去年纪念做的事体,但因时原因,拖了非常长远。写框架的新我一度深陷一个误区,我打算规划有些比前卫的样式,立体的按钮、浮动的面板等,比如下图中的风格。

图片 3

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

只是以切续续编写框架的历程被,我逐渐找到了系列化,上图的体制就是同等栽皮肤,编写框架的初不应将主要在这上头。当然,好之
UI 设计也是框架成功之均等片。

模块划分

编制框架的首先步就是是要是确定框架应该包含如何模块。因为凡轻量级框架,所以模块肯定没轻重级框架那么周,只有着力之部分组件。通过比有轻量级框架和工作总,大致常用之模块包括栅格、媒体、按钮、排版、表单、表格、面板和辅助工具。

在常用的立刻几乎单零部件中,需要着重关注的凡栅格、表单及面板,媒体组件为老重要,但是自由发挥的空间不死,我直接用了
Bootstrap 的传媒组件。

 

命名策略

首先是接近命名的层次以及组织。类命名一直是自身比纠结的地方,刚开工作之当儿以从一个见名知意又简单之类名总是抓耳挠腮。我在编辑框架时尽量避免与
Bootstrap
的类名重叠,但为未可知完全避免。对比其他框架会发觉,这种情况不可避免的见面现出,毕竟类名会有肯定的规律性和层次性。在当时一点上本人比较好
Bootstrap 的风骨。下面和 Bootstrap 的表单做一个对比。

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
等元素于类名,而是让父元素一个类名,个人对这种做法表示疑问,不从像样名会降低框架编写和动的八面玲珑。

第二单政策是组件的梳洗,比如按钮及面板还是多个语境(颜色、大小等),在马上或多或少直达本身修框架时开了有简化,风格上有点
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
列的栅格缺少最常用之列宽(比如 10%、20%、30%相当于),比如下面 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
组件可以做及同。当然,这样的做法有利有弊。盒组件在后台管理网的布局中展现的越突出。其命名为是各式各样,比如
panel、widget、portlet、ibox、card等,每个后台管理网框架都见面指向之组件进行深开发,可见该在布局上的关键。给一个零部件起一个当的类名也颇关键,想了酷悠久,最后用了
box 的类名,当然一般景象下尽心尽力不要因此
box,因为这类名比较普遍。下面的 CodePen 模拟了 Bootstrap 的 list 及
panel 组件。

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

 

主题

给框架添加主题是同码有趣的业务。Snack
的默认主题是白,因为好黑色,最后加加了暗夜主题,编写主题只需要变更组件的颜色。演示文档
的页面用了暗夜主题,点击上之红色按钮可以切换主题。

总结

假定大家问我万分框架还好,我会毫不犹豫的选
Bootstrap。在工作中可以依据需求的难易进行框架选择,如果工作于还,最好因
Bootstrap
进行二次开发;反之,可以选一些轻量级框架,最好还是因自己之需求去轮子,如果大家愿意选择或许借鉴我之框架,那会是自家之荣幸。

相关文章