css的核心技巧

1.oo css的概念解读

oss css将页面可重用元素抽象成一个类, 用Class加以描述,而与其对应的html可以看做是该类的一个实例

2.oo css的作用和注意事项

作用

(1) 加强代码复用以便方便维护
(2) 减少css体积
(3) 提升渲染效率
(4) 组件库思想, 栅栏布局公用, 减少选择器


注意事项

(1) 不要直接定义子节点, 应把共性声明放到父类
(2) 皮肤与结构相分离
(3) 容器与内容相分离
(4) 抽象出可重用的元素, 建好组件库, 在组件库中寻找可用的元素组装页面
(5) 往你想要扩展样式的对象本身增加class而不是父节点
(6) 避免使用id选择器 id选择器权重太重
(7) 类名简短清晰语义化





原文链接:segmentfault.com

上一篇:WebGL 系列 13 简单的动画
下一篇:CSS 外部样式

相关推荐

  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: 天空的眩光,睡眠反射,精细的房屋细节相当惊艳,下面我们大致说一说这张图片中的一些技术细节。图画的源码地址在文末。

    6 个月前
  • 💫 CSS 幻术 | 抗锯齿

    前言 传统网页的呈现是基于像素单位的,所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说,放大像素逻辑的图片,必然导致可视质量下降(信息失真)。

    4 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ 诶呀,口水流出来了。

    5 个月前
  • (译)CSS 定位与层叠上下文(Stacking context)

    你是否在使用定位时,会遇到一个定位元素即使设置更高的层级,也无法将另一个定位元素覆盖的情况?通过理解层叠上下文,你就能更好的构建你的应用。理解渲染流程和层叠顺序当浏览器将 HTML 解析成 DOM 结...

    8 天前
  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两个方法都可以用来判断变量类型 区别:前者是判断这个变量是什么类型,后者是判断这个变量是不是某种类型,返...

    5 个月前
  • (二)各大笔试网站(牛客网、赛码网、测评网)介绍和做题技巧——以前端开发为例

    进行笔试之前,我们首先要了解的是,我们春招、秋招的时候,企业用的是什么平台。 因为每一个平台的代码输入规则不一样。据我了解,一般企业会用到以下几个平台: 牛客网:腾讯、美团等一众大中小厂 ...

    7 个月前
  • 黑魔法之 CSS Entry

    大家都知道 webpack 的 Entry 都是 js,如果想输出 css 文件只能在 js 文件里导入 css,所以很多人都会想要是 entry 也可以是 css 那多好,这样就可以任意输出 cs...

    2 年前
  • 高级函数技巧-函数柯里化

    我们经常说在Javascript语言中,函数是“一等公民”,它们本质上是十分简单和过程化的。可以利用函数,进行一些简单的数据处理,return 结果,或者有一些额外的功能,需要通过使用闭包来实现,最后...

    2 年前
  • 高效的jQuery代码编写技巧总结

    最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码。

    4 年前
  • 高度等于动态宽度(CSS流体布局)[复制品]

    web-tikiThomas Norman提出了一个问题:Height equal to dynamic width (CSS fluid layout) [duplicate],或许与您遇到的问题类...

    3 年前

官方社区

扫码加入 JavaScript 社区