资讯专栏INFORMATION COLUMN

用更合理的方式写 CSS

CntChen / 1825人阅读

摘要:和出于以下原因,我们鼓励使用和的某种组合可以帮助我们理清和之间清晰且严谨的关系。可以帮助我们创建出可扩展的样式表。参考资料的的,也就是,是一种用于和类名的命名约定。

OOCSS 和 BEM

出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合:

可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。

可以帮助我们创建出可重用、易装配的组件。

可以减少嵌套,降低特定性。

可以帮助我们创建出可扩展的样式表。

OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

参考资料:

Nicole Sullivan 的 OOCSS wiki

Smashing Magazine 的 Introduction to OOCSS

BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。

CSS Trick 的 BEM 101

Harry Roberts 的 introduction to BEM

示例

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

.listing-card 是一个块(block),表示高层次的组件。

.listing-card__title 是一个元素(element),它属于 .listing-card 的一部分,因此块是由元素组成的。

.listing-card--featured 是一个修饰符(modifier),表示这个块与 .listing-card 有着不同的状态或者变化。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116423.html

相关文章

  • 响应式开发中合理选定CSS媒体查询分割点

    摘要:本文响应式开发中合理选定媒体查询分割点翻译自的一文。本文从属于笔者的前端入门与最佳实践中的响应式开发系列文章。声明式编程应用到中即是应当定义,而不是。我们上面讨论过的一个关于分割点的容易混淆之处就是分割点同时代表了某个范围。 本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoi...

    Rango 评论0 收藏0
  • 最底层程序员一点思考

    摘要:作为一名在最底层工作了年的程序员,大的风浪没见过,游泳池的水倒是喝过几口。为什么总有人能比你做的更好善于沟通让你轻松跨域障碍很大比例的程序员不擅长沟通,埋头写自己的代码,出了问题自己默不作声,死憋一天。 作为一名在最底层工作了7年的程序员,大的风浪没见过,游泳池的水倒是喝过几口。一路走过来支撑着我继续前行的是爱好、工作、还是钱?还是钱??还是??? 写好代码是你的工作 作为程序员,你的...

    邱勇 评论0 收藏0
  • 简单易懂CSS Modules

    摘要:结果是选手获胜,名为的元素,最终的值为。而合理的命名约定,的确是组织代码的有效策略。它们会再由转换为适当的组合。虽然本文为了严谨,结果写了相当长的篇幅,但希望你读过之后,还能觉得是简单易懂的。 不要误会,CSS Modules可不是在说css模块化这个好像在某些地方见过的词,它其实是特指一种近期才出现的技术手段。 什么技术手段呢?请待后文说明。 层叠样式表 我们知道,css的全名叫做层...

    chunquedong 评论0 收藏0
  • 2021年,用更现代方法使用PGP(下)

    摘要:上篇链接年,用更现代的方法使用上年,用更现代的方法使用中公钥的发布与交换讨论公钥安全交换的中文文章比较少,而这一环是整个加密体系的重中之重。年月,有攻击者恶意向公钥服务器提交了对两个著名网友的签名背书。此事件中的受害者的证书就被签名了次。上篇链接:2021年,用更现代的方法使用PGP(上)2021年,用更现代的方法使用PGP(中)PGP 公钥的 发布 与 交换讨论公钥安全交换的中文文章比较少...

    Tecode 评论0 收藏0

发表评论

0条评论

CntChen

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<