首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >面向对象的CSS样式

面向对象的CSS样式

作者头像
Marco爱吃红烧肉
发布2021-07-23 15:15:26
发布2021-07-23 15:15:26
6370
举报
文章被收录于专栏:无敌小笼包无敌小笼包

OOCSS:面向对象的CSS样式,通过对CSS样式的合理规范,重复使用,达到代码的精简,便于换肤。

作用:

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

注意事项:

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

拓展

OOCSS

Reset

优点:样式初始化设置非常全面 缺点:设置了部分多余的设置,border

Normalize

优点: 缺点:有些默认的没有设置

Neat.css

优点:

解决Bug,低级浏览器常见Bug

统一效果,但不盲目追求重置为0

向后兼容

考虑响应式

考虑移动设备

缺点:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-02-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 作用:
  • 注意事项:
  • 拓展
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档