AM 介绍 —— CSS 的属性模块

简介:

我读了一篇文章article by Harry Roberts ,在文章里Harry Roberts 介绍了关于CSS一个有趣的概念。 他认为在css属性中使用[],可以帮助开发人员快速理解这些属性的功能。 他给出了下面的示例,证明使用[]可以使类更容易校验-更容易快速理解。以便于帮助理解它们的目的,达到一目了然。他给出了个例子,他认为可以使类描述更具可识别性(scannable) - 也就是说,更能一目了然:

<div class="[ foo  foo--bar ]  [ baz  baz--foo ]">

我必须承认,刚开始的时候非常不爽这个技术。这种给类一个命名比如 [ 和 ] 的想法,不但不符合 CSS,还在一个类属性里面不断做重复,而且这还似乎纯粹是给人类阅读而不是给浏览器阅读的,好吧,不对。我现在还是这样认为的,实际上,不过它让我更深入的思考了标记 & 语义,所以谢谢哈利!

我开始研究它的时候,有好多人都建议用类似的办法,比如说用 / (本・埃弗拉), 或者 | (斯蒂芬・诺兰),不过还是让人觉得不自然。我想到的是:

为毛你已经有那么多类了你还需要更多的类让它们变得可读?

因为,让它更清晰,疯了吧。可读,可识别的 HTML 确实是一个值得追求的目标,不过这种技术明显从根本上就破坏了基于类的样式。

文章转载自 开源中国社区 [http://www.oschina.net]

相关文章
|
16天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
6天前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
18 0
|
6天前
|
前端开发
CSS属性
CSS属性
17 0
|
7天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
12 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果,包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如,使用`blur(10px)`可使图像产生模糊效果,包裹层设置`overflow: hidden`可避免边缘模糊;`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度;`grayscale(1)`将图像转为灰度;`invert(1)`实现图像颜色完全反转;`opacity(0.5)`调整图像半透明;`saturate(350%)`增加饱和度;`sepia(100%)`营造复古深褐色调;`hue-rotate(180deg)`改变
31 4
CSS常用滤镜属性讲解
|
2月前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
36 2
了解 css中 backface-visibility 属性
|
9天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
12 0
|
2月前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
2月前
|
前端开发 搜索推荐 UED
浅谈css的cusor属性
浅谈css的cusor属性
35 1
|
2月前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!