OO的CSS尝试:面向对象的样式表实践
美工和程序员如何合作? 我的答案是就靠这种规则的CSS
因为结构比较规则,所以可以通过固定的Taglib来生成table
但美工和程序员之间需要一个熟悉CSS/Scritpt的web程序员
之前想到过用类似于面向对象的方法来做CSS,主要的设计思路如下
对于某种类型的Table,在系统中肯定会出现多次,
例如用于显示新闻的,显示公告的等等。
因此把这种Table总结为一个CSS,而这些不同的CSS又有一些共性。
代码:
sampleTable.css
.sampleTable {
}
sampleTable2.css
.sampleTable2 {
}
例如表头,数据行等等,很多元素都相同。
因此做一个CSS模版,通过CSS属性继承的技巧来实现。
代码:
.sampleTable1 {
}
.sampleTable1 tbody .text{
}
.sampleTable2 {
}
.sampleTable2 tbody .text {
}
为什么说是OO的CSS呢?
因为这个CSS借鉴了OO的部分思路,继承,抽象和多态
继承,就是CSS的class继承了父class的属性如.table tbody
抽象,就是按照实际功能抽象为一个可描述的名字,如.text
在应用的时候,上面的.table .label .menu等等,可以看作是接口
不同的css实现相同的接口。如.table1 .table2,都应该有.label .ment
一个<TABLE class="table1">,可以看作是.table1这个接口的一个对象,
是吧,这个对象也可能是table2的对象,
但他们都是实现了.table这个接口。
table对不同接口的实现,就是OO中的多态。
那么,这样做的好处是什么?
首先,你得到了一个干净的table,没有多余的颜色格式信息
第二,这个表格是规则的,你可以通过taglib等模版自动生成
第三,更换一个class很简单,只需要改动一处,不需要修改td等元素
第四,更好的组织css,将css按照颜色或功能分为多个文件
代码位于:http://icecloud.51.net
现在我只实现了一个table的0.12版本
有兴趣的朋友不妨一起来做这个OO-CSS项目 :>
版权声明: 本文由冰云完成,作者保留中文版权。 未经许可,不得使用于任何商业用途。 欢迎转载,但请保持文章及版权声明完整。 如需联络请发邮件:icecloud(AT)sina.com Blog:http://icecloud.51.net
|
分享到:
相关推荐
oocss Object-Oriented CSS
漫談 CSS 架構⽅方法 - 以 OOCSS, SMACSS, BEM 為例
主要介绍了CSS的OOCSS和SMACSS以及BEM,这三种CSS编程方式也是目前前端设计开发中的主流,需要的朋友可以参考下
iotaCSS:智能,开源,基于Sass的OOCSS框架,iotaCSS可以帮助您随时创建轻量级,高性能,可读和完全响应式的用户界面。
OOCSS 面向对象的 CSS(用于 SASS)指南。 这是建立关于 OOCSS 的约定的起点。 这种结构几乎和启发。 什么是 OOCSS? CSS 不是面向对象的语言。 2009 年,Nicole Sullivan 向开发者社区介绍了这个论点( )。 ...
#OOCSS
OOCSS即面向对象的CSS,这里对象指的是页面中的元素对象,与传统编程中的面向对象不太相同,比如不存在方法这种东西,硬要说的话,附加的一些class可以看作是继承或者接口之类的东西来实现对象的差异化。比如电商...
BEM CSS和OOCSS的思想大家在日常编码中一定有所用到,只是没有系统的了解和完全规范的使用。 BEM(Block, Element, Modifier) CSS 介绍 BEM是一种 前端命名规范 ,顾名思议就是将页面拆分成每一个富有语义的块,块和...
它绝不是全面的,但它旨在建立在最佳实践的基础上,并从 OOCSS、Bootstrap、Inuit CSS、Zurb Foundation、Bourbon Refills 和(当然)HTML5 Boilerplate 中汲取灵感。 当与搭配使用时,Tanlinell 框架效果特别好。...
基于Sass预处理程序,BEM命名约定和OOCSS方法。 ITCSS体系结构和Inuitcss框架启发了我一些东西,我对其进行了扩展并适应了我的开发风格。 结构 设定档 在这里,我们有将在整个代码中使用的全局变量。 考虑排版设置...
主要介绍了浅谈CSS编程的OOCSS和SMACSS设计模式,作者分析了这两种设计CSS的不同思路,需要的朋友可以参考下
BEMpress 面向OOCSS的入门主题
bemoid:基于BEM约定和OOCSS方法的面向组件的SASS框架
自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统,用来组织你的CSS代码方式之一。 OOCSS不同于其他组织CSS代码方法,比如SMACSS或者BEM。通过将CSS代码和结构分离让你的...
jsoo-css
组件套件一个模块化的,可扩展的,基于Sass的OOCSS框架,用于快速开发Web应用程序界面。CSS目录结构文件夹结构如下: /settings :全局变量和站点范围内的设置/tools :混合/generic :低特异性,影响深远的规则集...
Pigeon是一个OOCSS框架,用于快速制作原型并构建智能,可扩展的网站。 :warning: 注意:该项目不再被维护。 如果您有兴趣接管维护,请与我联系。 当前版本: 1.2.5浏览器支持: Android浏览器2.2–4.2,Firefox ...
scally:Scally是一个基于Sass的BEM,OOCSS,可响应CSS框架,为您快速构建可重用UI奠定了坚实的基础。
gosp.css 大蒜,洋葱,盐和胡椒粉... 如何使用 在Sass项目中 @import "gosp.css/src/gosp"; CSS文件 @import "gosp.css/dist/gosp.min.css"; HTML链接标签 <link rel="stylesheet" href="./css/gosp.css/dist/...