CSS Frameworks的概念

2024-01-08 17:49
文章标签 css 概念 frontend frameworks

本文主要是介绍CSS Frameworks的概念,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近看到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。不过完全的一体化解决方案我还没想好,也许月影多请我吃几次烤鸭我就能想好。

这篇关于CSS Frameworks的概念的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/584306

相关文章

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f

在React聊天应用中实现图片上传功能

《在React聊天应用中实现图片上传功能》在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于React的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起... 目录技术栈实现步骤1. 消息组件改造2. 图片预览组件3. 聊天输入组件改造功能特点使用说明注意事项