关于Meta CSS框架,可以看
http://www.fangyuqiang.com/metacss,或者JavaEye上的
新闻或
论坛良好贴(实际上在还没有产生任何讨论之前,就被评为良好贴——显然这是另一个可能引起我兴趣的话题)。
虽然作者
肉包子声称Meta CSS是一个“
框架”,但是在我看来,它基本上只是一个guideline和一组
貌似“放之四海”的style rules。如果说它可以表现出框架的一些特征(如extensibility),毋宁说CSS本身就是一个框架。
其实是否能算做“框架”并不是重点。一个良好的guideline或者一组实用的patterns比大而无当的framework要更有意义。不幸的是,Meta CSS不仅没能总结Best Practice,反而充当了典型反例,行内黑话叫做“
Anti-Pattern”。
简单来说,Meta CSS的建议是:将一些基本样式(包子所谓“元定义”)缩写为一个样式类,比如<div class="div1 fwb tar">,fwb和tar就是Meta CSS提供的“元类”,fwb就是font-weight:bold,tar则是text-align:right。若不考虑div1可能覆盖定义,则该div元素会应用粗体和右对齐的样式。
考虑一下这与<div class="div1" style="font-weight:bold; text-align:right">有何本质差别?
答案是没有。
当然你可以争辩说,inline style无法被覆盖,Meta CSS更灵活。然而考虑明确使用fwb和tar的用意,就会发现,fwb和tar可以被覆盖,恰恰是缺点。
按照肉包子所言,inline style“写起来有点麻烦,代码也难看,维护性也不好”,然而这些都不构成本质差别。或许最大的因素是“到处都是style会
让人BS的,觉得你这前端div+css用得也忒不好了”。
所以,你知道嘛,Meta CSS是赎罪券——你觉得写style="font-weight:bold; text-align:right"是罪恶的,而class="fwb tar"消除了这种罪恶
感。与此同时,它还鼓励你更多的犯罪(因为fwb tar只要7次击键,而原来需要35次——降低犯罪成本80%)。
以一个粗俗而<span style="text-decoration: line-through">不</span>恰当的比喻:比傻逼更令人BS的是把傻逼当牛逼(简称装逼)。
Meta CSS的出现是有原因的,正如一个帖子没有被讨论过就被评为良好贴,也肯定有原因的(或者是个启示)。
肉包子指出设计Meta CSS的原因来自于“大型网站”的“需求”。
说实话,在“大型网站”里看到class="left"这样的代码,完全可以理解。越是商业网站,越可能需要在有限资源下做出折中或妥协,因为make it work是第一位的。既然do business难免要do evil,那么降低犯罪成本、提高犯罪效率就是硬道理——尤其对于通常总疲于奔命应对产品部、设计部、业务部、技术部、客服部……外加什么都懂的boss的前端开发小兵来说。Meta CSS的贡献是把这些罪行(我觉得“行”读做“性”比较有力量)提炼萃取,并正当化、规范化,从而给我们一个anti-pattern的活标本。
其实我并不担心这个anti-pattern会被广泛传播和使用,至少不会比
某某征途更令我担心。说到底,如果你确信那些网页两年内不会有什么修改,或者在两周之后就会彻底重做,那你完全可以用FrontPage来制作(只是记得把meta name="generator"那句删了,这可以大大减少你被BS的概率)。
我更感兴趣的是不同的行为模式和背后的机制。显而易见,Meta CSS反映了
以样式为中心的行为模式,而所谓“正确”行为模式,则是
以语义为中心。
从某种意义上说,如果设计者本身就不关心
是什么而只关心
看起来啥样,那么实现者采用以样式为中心的行为模式也是很正常的。
不过我很反感拿这个做借口,正如历史学不能代替伦理学,犯罪学研究不能用做纵容犯罪的理由。必须区分真正的现实主义和看似有理实则荒谬绝伦的白猫黑猫论。
另一方面,样式的设计和维护,本身确有独立的价值。举个例子来说,对于字体的使用,追求完美的设计师会总结出一些特定的字号和字体替换系列的组合。更典型的是layout,它本身就一定是一组互相配合的rules。所以“要有CSS框架”的想法是有道理的。遗憾的是,这恰恰是Meta CSS(有意)忽略的地方。
关于所谓CSS框架,正淳有一篇
文章可资参考,除了阅读正文外,你也应该读一下以下几个人的comments:Realazy、Leechael、爆牙齿(这个名字让我邪念丛生……)。如这些评论者一样,基本上我也对所谓CSS框架持怀疑态度。但是我又有一些其他想法,主要是样式的复用问题。也许可以做为下一篇blog的主题。
最后,既然认定Meta CSS是一个anti-pattern,那么也应该给出解决的方法(称之为重构之道?)。其实Meta CSS的原文提出过4个方式,结合使用方式2(层叠)、3(class组合),正是CSS设计的一般方式。唯一需要指出的是,html与css的结合点,即selector,总应该是语义化的。tag和id天然就是语义化的,主要问题出在class上。应该尽量限制所谓的
样式类,虽然有时无可避免(正如有时你会用inline style),但是至少不要像Meta CSS那样把偏方当补药。
分享到:
相关推荐
诊断性meta分析是Meta分析的一个重要局部,准确诊断性Meta分析是临床治疗的根底。本篇文章将向大家推荐一款专用于诊断性试验的免费Meta分析软件Meta-DiSc,并详细介绍如何使用该软件进行诊断性Meta分析。 首先,...
#### 十一、网页设计DIV+CSS——第9天: 第一个CSS布局实例 - **确定布局**:根据页面内容和设计需求,规划布局结构。 - **定义body样式**:设置body元素的基本样式,如背景色、文字颜色等。 - **定义主要的div**:...
4. **Bootstrap**: 一个流行的前端框架,提供了一系列的CSS和JS组件,可以帮助快速搭建美观且功能丰富的响应式网页。 #### 四、页面设计与功能 - **首页**: 展示了网站的主要信息和服务,通常包含导航栏、轮播图...
#### 十一、网页设计DIV+CSS——第9天: 第一个CSS布局实例 ##### 实战演练 - **布局规划**:从实际需求出发,规划页面的整体布局结构。 - **body样式**:定义页面主体的样式。 - **关键div定义**:对页面中的主要...
meta标签的一个典型用途是配合http-equiv属性,可以指定网页应该如何被浏览器处理。例如,它可以指示浏览器每隔一定时间刷新页面,或者在指定时间后自动跳转到另一个URL地址。通过设置content属性来确定刷新频率或...
Meta 作为一家技术巨头,自然会将越南视为一个重要的市场。然而, Meta 在越南的市场发展也面临着一些挑战,例如语言障碍、文化差异、市场竞争激烈等。 在竞争分析方面, Meta 需要面临来自国内外其他技术公司的...
在这个“一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript.md.zip”中,我们可以探索几个关键的Web开发概念和技术。这个项目包含5个页面,表明它是一个完整的静态网站,使用了HTML、...
- 这个作品是一个学生个人主页的网页设计项目,采用了HTML+CSS布局制作,适用于web前端期末大作业或大学生网页设计作业的需求。整个网页设计非常精美,代码简洁,非常适合初学者进行学习和实践。 2. **网页编辑**...
这篇文件的标题涉及到撰写高质量流行病学研究论文的一个关键环节,即随机对照试验(Randomized Controlled Trials, RCT)的Meta分析报告规范。Meta分析是一种统计方法,用于整合多个RCT研究的结果,以得出更可靠和...
<meta name="description" content="这是一个关于HTML和CSS学习的网页"> ``` 然后,CSS用于控制网页的布局和外观。在HTML中,可以通过`<style>`标签在文档内部定义CSS样式,或者通过`<link>`标签链接外部样式表。...
- **网页简介**:本作品为一个典型的静态网页设计项目,适用于学生的期末作业或课程设计。它采用了HTML与CSS结合的方式来进行布局,并且加入了JavaScript来实现一些动态效果。整体风格活泼、色彩鲜艳,能够吸引用户...
在这个压缩包中,包含了两款用于进行Meta分析的常用软件——RevMan和Stata,以及一个“使用说明.txt”文档。 首先,RevMan(Review Manager)是由Cochrane协作网开发的一款免费软件,主要用于创建和编辑系统性评价...
- **项目描述**: 这是一个典型的HTML静态网页设计作业,采用DIV+CSS布局方式构建,共包含九个页面。首页设计较为复杂且色彩鲜艳,顶部导航栏和底部区域的背景色设置为100%宽度,整体视觉效果活泼生动。此项目旨在...
本项目不仅是一个期末考核任务,更是一个综合性的学习过程。通过设计和实现这个旅游网站,学生不仅能够加深对HTML、CSS和JavaScript的理解,还能够在实践中提高网页设计能力。此外,项目的多样性也为学生提供了广阔...
本文将详细介绍如何利用这三种技术实现一个充满节日气氛的“除夕最炫烟花代码”。 首先,HTML(HyperText Markup Language)是网页内容的基础框架,用于定义页面的结构和内容。在创建烟花效果时,HTML可以用来设置...
- **布局方式**:采用DIV+CSS布局,这是一种常见的网页布局方法,能够实现更加灵活的页面布局与样式控制。 - **页面数量**:包含多个页面,每个页面都具有不同的主题内容与设计风格。 - **色彩运用**:色彩鲜艳且...