Css3 | IT-北北报

CSS架构(Object Oriented CSS)

2016/11 30 16:11

Object Oriented CSS简称OOCSS,直译就是”面向对象的层叠样式表”,那么怎么个面向对象法,请听我娓娓道来。

首先OOCSS并不是一门新语言,而是对css的抽象化、模块化、继承并复用的概念模型。
先举一个形象的例子,比如我们在网页中描述一个这样一个按钮

upload-ueditor-image-20161130-1480494510530063608

一般情况下你可能会这么写

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

.button {

background-color: #2d6ca2;

border-color: #2b669a;

padding: 10px 16px;

font-size: 18px;

border-radius: 6px;

font-size: 14px;

font-weight: 400;

line-height: 1.4;

text-align: center;

}

但是OOCSS可能要考虑细分类别与复用,就好比一盘宫保鸡丁是由胡萝卜、黄瓜、鸡丁、花生加调料几个重要组成部分组合而来,而花生这个类又可以用于老醋花生米这道菜,所以我们可能会这样写,Bootstrap在这一点做的很好,我引用了这个例子

<button type="button" class="btn btn-primary btn-lg">Primary button</button>

.btn {

padding: 5px;

font-size: 12px;

border-radius: 6px;

text-align: center;

}
.btn-primary {

background-color: #2d6ca2;

border-color: #2b669a;

}
.btn-lg {
padding: 10px 16px;

font-size: 18px;

font-weight: 400;

line-height: 1.4;

}

我想通过这个示例,你已经大概了解了OOCSS是个什么东西了。我们继续深入讨论一下这件事,要怎么分离类名才科学合理,在这有几个OOCSS的原则供大家参考
1、结构与样式的分离
每个元素都有不同的视觉展现,但是在同一项目中按钮、导航、下拉菜单等等是可以高度复用的,也许在页面A你使用的按钮,在页面B使用的时候只是调整了一下大小和颜色,所以如果结构和样式分离,控制大小的分别是.btn-sm和.btn-lg类,控制颜色的是.btn-info和.btn-error类,那么你基本就完成了结构与样式的分离。
2、容器与内容的分离
基于OOCSS建立的类模块,书写的样式不依赖于任何不必要的父级元素。这意味着它们可以在文档的任何地方被复用,无论结构如何,深度定制的设计样式模型应该单独去书写;简而言之,你的共用样式不要依赖于设计逻辑,不要为了实现一个效果给一个class写非常多的属性,如果一个class里超过10行属性,这时候你可能就要考虑是不是有些东西可以抽离出来,做到这点需要有很好的大局观,可能对于新手来说确有难度,但是请细心领悟这一点。
3、使用类名扩展基础类
一个对象总是由一个基础类,和多个扩展类拼装而成,请记住这一点
4、坚持语义化定义
刚刚的那个例子中颜色为什么不定义.btn-bule和.btn-red类,这就要讨论面向对象的css的本质是对象,info和error显然更具化,专业的说叫语义化,这就大大降低了复用的成本,因为你知道错误的颜色就是.btn-error。

总之,OOCSS是一套很深的方法论,需要大量的实践积累,更多的感悟,相信你会写出优雅的OOCSS。

多行溢出省略号

2016/07 04 11:07
记录一个知识点:

/*文字溢出省略*/
//单行溢出省略号
@mixin text-over {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行溢出省略号
@mixin multi-text-over {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;//几行后显示省略号
}

box-sizing 属性

2015/10 21 10:10

实例

规定两个并排的带边框的框:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

亲自试一试

页面底部有更多实例。

浏览器支持

IE Firefox Chrome Safari Opera

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的-moz-box-sizing 属性。

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

默认值: content-box
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxSizing=”border-box”

语法

box-sizing: content-box|border-box|inherit;
描述
content-box 这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box 为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。


无觅相关文章插件,快速提升流量