最近看到N多介绍CSS框架,前些天我说过一句话:“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”,当然也可能是我的视野太小了,或者是说世界太大了,我自己还是感觉还有一大堆我看不到的东西。
先来看一下一个我比较认同的概念:
框架可分为白盒(White-Box)与黑盒(Black-Box)两种框架。
基于继承的框架被称为白盒框架。所谓白盒即具备可视性,被继承的父类的内部实现细节对子类而言都是可知的。利用白盒框架的应用开发者通过衍生子类或重写父类的成员方法来开发系统。子类的实现很大程度上依赖于父类的实现,这种依赖性限制了重用的灵活性和完全性。但解决这种局限性的方法可以是只继承抽象父类,因为抽象类基本上不提供具体的实现。白盒框架是一个程序骨架,而用户衍生出的子类是这个骨架上的附属品。
基于对象构件组装的框架就是黑盒框架。应用开发者通过整理、组装对象来获得系统的实现。用户只须了解构件的外部接口,无须了解内部的具体实现。另外,组装比继承更为灵活,它能动态地改变,继承只是一个静态编译时的概念。
在理想情况下,任何所需的功能都可通过组装已有的构件得到,事实上可获得的构件远远不能满足需求,有时通过继承获得新的构件比利用已有构件组装新构件更容易,因此白盒和黑盒将同时应用于系统的开发中。不过白盒框架趋向于向黑盒框架发展,黑盒框架也是系统开发希望达到的理想目标。
再回头看一下现在网上那样多CSS框架(YUI是叫“YUI Library CSS Tools” 并非是“YUI CSS Frameworks”),有多少是真正以框架的概念在写,有多少只是定义样式基类的。当然,每个人对框架的理解不一定,你可能不认同我的说法。
再谈一下CSS 框架,并不非我不认可这个东西的存在,我从一两年前也就一直在尝试这样的东西。对于大型网站,前端的开发需要一个解决方案。框架自然是首选的。可惜距离我太远了,我太弱了T_T,我只要要求两点:
很明显,第一点,CSS做不到,第二点,相对其它语言很弱的说。
大约在一年前做一个中型网站时,我为了偷懒,我想到内容模块化,让程序员拼页面。大约方向也就是封装了一个又一个的功能块,程序员在要用到哪一块内容时就只要使用相应的HTML与CSS,大家都方便,我不要拼页面,他不用重复套代码,大家好才是真的好。
在同一个网站,差不多的内容块,多次使用是很正常的事,这也是就让模块化成为可能,比如一个图片列表,可能是用户头像列表,或者群组的图标列表,这时你会怎样写呢?相同的用这样吗?
.photoListUesr,.photoListGroup{ /*_*/ }
这样不是说不行,但如果突然说要再加一个相似的呢?这时可能就要调整样式。而我呢?尝试过这样的使用方式:
<div class="photoList UesrCt" />
<div class="photoList GroupCt" />
这样的话,我们一开始就分离出共同表现的东西,把.photoList
当成原型,通处额外的class再去处理细节。前些天,我写了面向对象的XHTML与CSS编程,其实只写了一半,另一半是详细的例子,不过介于要做太多的例子跟核心已经写出来就没写完,^^ 当然,这样也存在一定的问题,就是最初的原型的定义要很慎重,要尽量做到以后就算是改版也可能不用修改。CSS这东西,基本上一个框架最多只能适合一个站,当然,如果这个站足够大的话,这样使用才是有意义滴。
HTML与CSS越是模块化,文件越分散这个问题就越严重。HTML倒是好办,反正是应用程序最终要合并输出一份,但CSS一般会给抛弃直接使用。如果在刚才的例子中,在网页导入CSS的方式是这样的话:
@import url(/xxx/photoList.css);
@import url(/xxx/UserCt.css);
@import url(/xxx/GroupCt.css);
那甚至可以考虑用程序来拼页面,但是使用方便,请求数也成正比,一般情况大家都会选择手动合并文件。虽然人脑比电脑更智能,但很多时候,人脑的计算能力是比不上电脑滴。我曾经有这样的想法,就是使用服务端程序来处理CSS的发布机制,大约方向就是通过网站访问日志来分析出整个站各种页面的使用量,通过程序来计算哪些公共使用的要合并,合并的顺序(CSS的文件顺序会影响到优先权),等等各种计算并压缩输出。
可惜的是,这样一套复杂的程序可能只适合一个站,或者同系列的站群。虽然说做起来有点折腾,但我相信门户级别网站使用这样的方式是有必要滴,当然前提还要整个团队都要使用相同的设计模式。
PS:以上CSS发布程序,只是我的幻想,还没尝试过,有兴趣的朋友可以尝试一下,如有意外,概不负责。^_^~
当然,就以上这些还是不能称得上CSS Frameworks,或许只能叫成一个系统级解决方案,毕竟,CSS只是描述性语言。
前晚跟月影一起吃烤鸭时,有聊到这个,他问我有没有前端一体化的解决方案。JS组件化时也会面临同样的问题,差不多的发布机制应该也可以适用JS。不过完全的一体化解决方案我还没想好,也许月影多请我吃几次烤鸭我就能想好。
分享到:
相关推荐
"awesome-css-frameworks"是一个集合,它包含了众多优秀CSS框架的列表,旨在帮助开发者找到最适合其项目需求的框架。下面将详细探讨这些知识点: 1. CSS(Cascading Style Sheets):CSS是一种样式表语言,用于描述...
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 阅读更多软件开发网CSS框架相关知识: CSS教程关于css框架网页设计 门户网站构建CSS框架的规则 利用CSS框架进行高效率的站点开发 CSS框架的利与弊...
8. CSS框架(Frameworks): Bootstrap、Foundation等CSS框架提供了预设的样式和组件,可以快速构建响应式和易用的用户界面。 9. CSS性能优化: 了解如何减少选择器的复杂性,合理利用CSS重置,合并CSS文件,减少...
2. **使用Reset/CSS Frameworks**:通过使用如Normalize.css等CSS Reset或框架来消除不同浏览器间的默认样式差异。 3. **条件注释和浏览器特异性样式**:利用条件注释为特定版本的IE提供不同的样式表,或者使用前缀...
6. **CSS Frameworks的响应式设计**:所有这些框架都注重响应式设计,通过媒体查询实现不同屏幕尺寸下的适配,确保在各种设备上都能提供良好的用户体验。 7. **性能优化**:优秀的CSS框架会考虑性能优化,例如通过...
- **第3章:基础知识**(Fundamentals):这部分涵盖了CSS的基础概念和技术,适合初学者入门学习。 - **第4章:框架与集成**(Frameworks and Integration):讨论了如何选择合适的CSS框架,并介绍了将这些框架与...
Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它使用JavaScript、XMLHttpRequest以及其他标准如CSS和DOM来更新网页的部分内容,而无需重新加载整个页面。这使得网页可以更加交互和...
这个列表可能是为了帮助开发者们了解和掌握CSS的核心概念、最新技术和最佳实践。描述的简洁性表明它是一个专注于CSS的重要话题的资源库。 首先,我们来探讨一下CSS的基础知识。CSS是一种用于描述网页或应用程序的...
3. **CSS Frameworks**: 这些是预定义的CSS样式集合,可以帮助开发者快速构建响应式和一致的用户界面。常见的框架有Bootstrap、Foundation、Materialize等。它们提供网格系统、组件样式、响应式工具等,简化了网页...
- **官方文档**:学习框架的基本概念和用法。 - **社区资源**:参与框架社区,学习最佳实践和解决方案。 #### 二、学习和进阶资源 ##### 1. 教程网站 - **简介**:Udemy、Coursera和edX等在线教育平台提供了大量...
14. **框架(Frameworks)**:如React、Vue和Angular,它们简化了JavaScript开发,提供了组件化、状态管理等高级功能。 15. **浏览器兼容性(Browser Compatibility)**:不同的浏览器可能对某些CSS或JS特性支持...
1. **Ajax基础**:首先,书中会介绍Ajax的基本概念,包括它的组成部分——JavaScript、XMLHttpRequest对象、DOM操作以及CSS等,这些都是构建Ajax应用的基础。 2. **JavaScript库和框架**:Ajax技术离不开JavaScript...
5. **Core Animation**:虽然不是CSS,但Core Animation是iOS中用于创建动画和图形的强大工具,它提供了类似于CSS层叠(Cascading)的概念,可以创建复杂的视觉效果。 在"【框架】CSSApply"中,可能包含了用Swift或...
### 专业知识点总结 #### 一、概览与目标读者 ...通过以上内容的详细介绍,读者可以全面了解本书涉及的各种JavaScript框架的核心概念、应用场景和开发技巧,从而更好地利用这些框架构建高效、可靠的Web应用程序。
标题中的“uib-frameworks-responsive-bootstrap-webpage-mariagluck”是一个项目名称,表明这是一个关于创建响应式Bootstrap网页的示例。这个项目可能是由GitHub Classroom创建的,用于教学或实践目的,帮助用户...
3. **模块(Frameworks)**:Compass包含多个模块,如compass/reset用于样式重置,compass/grid帮助创建响应式布局,compass/icons则方便生成图标字体。每个模块都封装了一组相关功能,可以直接引入到项目中使用。 ...
1. **CSS基础**:包括选择器(如类选择器、ID选择器、元素选择器等)、属性(如颜色、字体、尺寸、布局等)和值的使用,这些都是CSS的核心概念。 2. **盒模型**:理解CSS盒模型对于布局至关重要,它包括内容...
5. **实时编译**:启用实时编译(Live Edit),在`Preferences` -> `Languages & Frameworks` -> `SCSS`中,勾选`Enable Live Edit`,这样修改SCSS文件后,浏览器会自动刷新显示CSS更新。 **TypeScript** ...
13. **CSS预设(CSS Frameworks)**:Bootstrap、Foundation等框架提供了现成的组件和样式,快速搭建响应式博客结构。 14. **CSS Grid布局**:2017年引入的新特性,可以创建复杂的二维网格布局,适用于博客文章列表...