资讯专栏INFORMATION COLUMN

css:oo css

syoya / 2560人阅读

摘要:既面向对象的作用加强代码的复用方便维护。组件库思想栅格布局可共用减少选择器方便扩展。注意事项不要直接定义子节点,应把共性声明放到父类。结构和皮肤相分离。对象应保持独立性。避免位置相关的样式。类名简短清晰语义化的名字并不影响语义化。

oo css

既面向对象的css

作用

1.加强代码的复用方便维护。
2.减小css体积。
3.提升渲染效率。
4.组件库思想、栅格布局可共用、减少选择器、方便扩展。

注意事项

1.不要直接定义子节点,应把共性声明放到父类。
2.结构和皮肤相分离。
3.容器和内容想相分离。
4.抽象出可重用的元素,建好组件库,在组件库内寻找可用元素组装页面。
5.往你想要扩展的对象本身增加class而不是他的父节点。
6.对象应保持独立性。
7.避免位置相关的样式。
8.避免使用id选择器,权重太高,无法重用。
9.保证选择器相同的权重。
10.类名 简短 清晰 语义化 oocss的名字 并不影响html语义化。

比如

neat.css less.css sass.css等

less 和 sass 区别

less基于javascript 用于日常工作代码中。
sass基于ruby 用于写大型的基础库。

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

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

相关文章

  • CSS命名规范

    摘要:本篇介绍几种命名规范。使用的网站四其他命名规范等减少对结构的依赖增加重复性的使用几种命名规范比较与在命名上相反的点可以放心使用,以为都是在模块内但不推荐当前我们的网站略有思想更概括,中的,相当于的,相当于的,相当于的中文 本篇介绍几种CSS命名规范。 (规范详细请参考底部References) 一、NEC (nice easy css) 网易前端CSS开源项目 1.1 样式分类 重...

    includecmath 评论0 收藏0
  • [译]148个资源让你成为CSS专家

    摘要:层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性,一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南,包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。 迄今为止,我已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

    impig33 评论0 收藏0
  • 简单易懂的CSS Modules

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

    chunquedong 评论0 收藏0
  • CSS Modules实践

    摘要:能最大化地结合现有生态预处理器后处理器等和模块化能力,几乎零学习成本。编码相关的所有样式上例中打印的结果是注意到是按照自动生成的名。实践手动引用渲染结果使用可以实现使用属性自动加载模块。 文章同步于Github Pines-Cheng/blog 随着前端这几年的风生水起,CSS作为前端的三剑客之一,各种技术方案也是层出不穷。从CSS prepocessor(SASS、LESS、Styl...

    hankkin 评论0 收藏0
  • 【译】编写更好的CSS必备的40个工具

    摘要:一个叫的人用纯重绘并模拟了种不同的移动设备包括可以给你的网站添加不相关的独立组件的一个库。每一个组件都是针对移动设备定制的,并且它有很多你在传统的框架中看不到的功能。如果你用开发移动优先的网站,并想要网站正常运行在低版本的上,可以考虑。 众所周知,CSS是非常棒的,它使网站看起来很漂亮,可以为网站添加动画,并让呈现和内容分离。去了解CSS的一切是非常难做到的,它只会变得更加困难,因为我...

    moven_j 评论0 收藏0

发表评论

0条评论

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