我们知道HTML和CSS是
正交的。这意味着可以分离内容结构(html文档)与外观样式(stylesheet)。
尽管是分离,但是最终页面的呈现需要把两者结合起来。这个结合机制就是selector。在基本selector中,tag和id是天然语义化的。问题在于class。很多时候我们发现添加class只是为了为html文档增加一个钩子,通过这个钩子,我们可以对文档的这个部分应用样式。有时候我们可以很容易将这个钩子语义化,即作为tag语义的细化或者补充。但是有时候也会无法语义化,从而出现纯粹的样式类(Style Class)。举例:.left、.red这样的,是典型的样式类,.style1,.style2则很可能是由工具产生的样式类。
样式类,有三种典型原因。
第一是语义归纳能力不足或者语义化的动力不足。比如你可能很容易识别出表格行的交错背景色,并用.row-even和.row-odd来细化语义。但是你可能却不能识别出交错浮动(一张图片左浮动,下一张图片右浮动,以此类推)。又如“同样风格的一段文字,有些要红色,有些却要绿色”。基本上颜色背后很可能暗藏着语义(比如两种不同的醒目标示),但是客户只告诉你,这里要红色,这里要绿色,他不会告诉你语义,就好像导演给女演员hotel的房间号但是通常不会明确告诉她要干啥,此乃
潜规则。对此的解决之道,一是靠猜(看你对潜规则有多少经验),二是直接问导演你究竟想干嘛(当然需要点沟通技巧),三,对于一些你确定是ONS的(One occurreNce Style,一次性样式,也就是只适用于这个特殊页面的特殊部分),也可以考虑直接用inline style。ONS的需求是存在的(尽管有些同志BS它),比如在一篇文章中对不同图片的左右浮动定义可能仅仅是因为设计者觉得这样排版最sexy。
第二是缺乏对selector的认识。还是以交错对齐为例,同样是float:left对float:right,img.odd/img.even与img.left/img.right有什么区别?如果说前者就是语义化的,有些同志就不服气,因为你还是要返回去改html加上odd/even的钩子,而且它们貌似只是为了样式而存在。但是img:nth-of-type(2n+1){float:right} 和 img:nth-of-type(2n){float:left} 如何呢?高级selector的组合具有极强的描述能力。即使我们现在为兼容性仍然要用odd/even作为钩子,但是你确实知道这是一个高级selector的替代品,而不是附加的样式缩写。
第三是CSS本身的不足。最典型的例子是layout。layout通常要用一组rules来设定,而且常牵涉
复杂的trick。当前CSS较缺乏高级布局能力,再加上布局本身的复杂性,所以我们有重用布局的需求。而布局所需的钩子就是预先设定的。虽然这些钩子仍然能被语义化(比如在多栏布局中不是写.top-bar、.left-col、.right-col,而可以写做.header、.main、.sidebar),甚至保持文档内容顺序独立于布局位置,但不可避免的,确实是由样式表预先决定了部分文档结构和类名。对于这个问题,我们要承认CSS不是完美的,而且布局有其内在复杂性。除了接受这个不完美,以及等待它变得更完美之外,另一个方式是引入像
lesscss那样的CSS预编译,来管理样式的复杂性。lesscss的mixins机制可以把rules与语义钩子解耦,比如你可以定义两栏布局的.left-col和.right-col的样式,但是不直接使用这两个样式类,而是通过mixin方式将样式类内的rules混入到.main这样的语义类中(当然我更希望把.left-col写成@ruleset left-col {...},从而完全标明left-col是一个样式组合)。
BTW,对CSS进行增强是个有趣的话题,Bert Bos(CSS规范的主要编辑)有个著名的反对意见:
Why “variables” in CSS are harmful ,但是Bert不会反对lesscss,因为它
工作在正确的层次上。事实上,也因为有了lesscss类似的预编译手段,试图将style class正当化的
Meta CSS更显得是个
糟糕的主意。因为lesscss做的是对样式进行更高层级的抽象,Meta CSS却反其道而行。
总之,样式类虽然不至于罪大恶极,但还是应该,也可以尽量避免的。
分享到:
相关推荐
### 关于窗口类样式 在计算机图形用户界面(GUI)编程中,窗口类样式是定义窗口行为和外观的重要属性之一。这些样式不仅控制了窗口如何响应用户的操作,还定义了窗口内部的一些特性,如绘制机制、对齐方式等。本文...
styleclass库很可能提供了一组预定义的样式类或者样式管理工具,用于帮助开发者在项目中创建和维护一致的视觉样式。在Web开发中,这样的库可以简化CSS样式在Python应用程序中的应用,尤其是在处理动态生成的HTML时。...
本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下: 动态修改style 1.易错:修改元素的样式不是设置class属性,而是className属性. 2.易错:单独修改样式的属性使用”style.属性...
js去除div里class样式,自己学习的,分享给大家,大神就不要说我了,谢谢。
以上就是Vue.js中绑定class和style的基本方法,通过这种方式,开发者可以灵活地控制元素的类和样式,使得页面具有更好的交互性和动态效果。在实际开发中,正确地使用这些绑定技巧,可以极大提升开发效率和代码质量。
但是,关于覆盖规则,`style`属性的优先级高于CSS类(`class`)。当一个元素同时具有内联样式和类样式时,内联样式会覆盖类样式,除非类样式有更高的特异性(例如,使用`!important`声明)。 在给出的示例中,当...
伪类选择器用于向元素添加特定状态下的样式,如`:hover`、`:active`等,它们不是真正的类,而是在特定条件下触发的样式规则。伪类选择器增强了网页的交互性和用户体验,使网页更加生动和响应用户操作。 ### 结论 ...
在本篇文章中,我们将深入了解Vue.js中的数据绑定功能,特别是在绑定class和style样式方面的应用。这是初学者学习Vue.js时的一个重要环节,因为样式操作在Web开发中是非常常见和重要的需求。 首先,我们来探讨如何...
在JavaScript中,改变元素的背景图像(backgroundImage)和类名称(class)是常见的操作,这对于动态更新网页的样式和交互性至关重要。本文将详细探讨这两个主题,并提供实用的代码示例。 首先,我们来讨论如何使用...
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和...
本文主要讨论两种主要的方法:`getComputedStyle` 和 `currentStyle`,它们用于获取元素的CSS样式信息,特别是那些通过class属性引用的外部样式表中的样式。 1. `getComputedStyle` 是一个DOM全局方法,主要在非IE...
在Vue.js框架中,改变元素样式的操作是前端开发中常见的需求,Vue为此提供了灵活的方式来通过绑定class或style来控制元素的样式。本知识点将详细介绍如何在Vue中使用class或style来动态改变元素的样式,并通过实例...
在Windows Presentation Foundation (WPF) 中,样式(Style)是一种强大的机制,用于统一和简化UI元素的外观和行为。它们可以定义控件的颜色、字体、布局等视觉属性,并且可以在整个应用程序中重用,提高代码的可...
内联样式是直接在HTML元素中通过style属性定义的样式,内部样式则是在HTML文档的head部分的style标签中定义,而外部样式是通过link标签引入的独立的CSS文件。每种方式都有其特定的用途和优先级规则。 内联样式的...
在Vue中,动态绑定class和style是实现组件样式灵活控制的关键。下面将详细讲解Vue中如何绑定class和行间样式style。 ### 一、绑定class属性的方式 1. **通过数组的方式绑定多个class** 在Vue中,可以使用数组形式...
在深入了解JavaScript操作class和style样式之前,我们需要先了解class和style在HTML文档中表示什么以及如何使用JavaScript进行操作。 ### HTML中class和style的基本概念 在HTML中,class是HTML元素的一个属性,...
内联样式(如`style="..."`)具有最高优先级,接着是ID选择器(`#id`),然后是类选择器(`.class`)、元素选择器(`tag`)和属性选择器等。相同优先级的选择器,会遵循后来居上的原则,即后定义的样式覆盖先定义的。 **...