`

CSS 一些原则

 
阅读更多
优化你的CSS
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:
1、不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释:因为ID选择器是唯一的,加上div反而增加不必要的CSS匹配。
2、不要在class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
3、尽量少使用层级关系
一般写法:#divBoxp.red{color:red;}
更好写法:.red{..}
4、使用class代替层级关系
一般写法:#divBoxullia{display:block;}
更好写法:.block{display:block;}
5、在css渲染效率中id和class的效率是基本相当的
class最在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。
分享到:
评论

相关推荐

    高效整洁CSS代码原则

    CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset  不同浏览器...

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    这本书可能涵盖色彩理论、排版、布局设计原则,以及如何利用CSS进行图形绘制。同时,它可能还会介绍一些高级技巧,如自定义字体、CSS预处理器(如Sass和Less)的使用,以及如何处理浏览器兼容性问题。 "HTML5和CSS3...

    css框架Blueprint CSS

    Blueprint CSS 提供了一系列预定义的CSS样式,如表格、表单、按钮、链接等,这些样式遵循一致的设计原则,确保了视觉一致性。此外,框架还包含了实用的布局类,如`.container`用于包裹内容,`.clearfix`用于解决浮动...

    网页设计配色方案(配色方案、配色原则、CSS代码生成器)

    5. **CSS代码生成器**:为了方便开发者快速实现配色,有许多在线工具如ColorBrewer、Coolors等,它们可以根据设定的参数自动生成相应的CSS代码,帮助设计师快速创建和测试颜色方案。 6. **实际应用**:在网页设计中...

    css禅意花园 CSS Zen Garden

    2. **单一CSS文件原则**:在CSS禅意花园中,所有的设计变化都源于修改一个CSS文件。这展示了只需调整CSS,无需改动HTML,就能实现设计的更新和创新。 3. **激发创意**:这个项目鼓励设计者挑战自我,通过CSS创造出...

    CSS:The Definitive Guide, 4th Edition[CSS权威指南](英文版)

    书中,Meyer还与Estelle Weyl共同探讨了在现实应用中遇到的一些问题,比如不同浏览器对CSS属性的支持度。浏览器兼容性一直是前端开发者面临的重要挑战。不同浏览器厂商在实现CSS标准时可能会有所差异,这就要求...

    一些CSS的设计原则浅谈

    相信大多数人都有过关于CSS的痛苦经历,从我加入公司到现在,不到两年的时间里,听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题,为什么很多人觉得CSS很难写,如何才能让其他人更优雅...

    CSS的一些帮助文档,给有需要的朋友

    最后,`国外css模板`可能包含了一些实际的CSS样式示例,这些模板可以作为学习和设计灵感的来源。通过分析和修改这些模板,你可以直观地学习到CSS在实际项目中的应用,了解如何将理论知识转化为实践。 学习CSS,你...

    深入理解CSS中的属性模块

    OOCSS提倡的另一原则是结构和皮肤(Skin)应该分离,结构指布局与功能,皮肤指视觉外观。 四、预处理器的使用 CSS预处理器如Sass或Less提供了很多额外的功能,比如变量、混合宏(mixins)、函数和作用域CSS,这些...

    京东css_html_京东css规范_css_

    通过分析这些文件,我们可以学习到如何将理论知识应用于实际项目中,同时加深对京东页面设计原则的理解。通过不断地实践和调整,我们可以逐步提高自己的前端开发技能,并掌握遵循特定企业风格规范的重要性。

    CSS事例

    这个名为“CSS事例”的压缩包文件似乎包含了一些关于CSS的实际应用示例,可能是为了帮助学习者更好地理解和掌握CSS技术。在“交天下CSS朋友,听批评”这句话中,我们可以感受到分享与交流的精神,这通常意味着作者...

    CSS实战精粹源代码 pro css techniques

    10. **CSS组织与模块化**:BEM(Block Element Modifier)命名法、SMACSS(Scalable and Modular Architecture for CSS)和原子设计原则等方法可以帮助我们编写更有序、可复用的CSS。 《pro css techniques》中的源...

    CSS禅意花园-css的超级精典实例

    9. **CSS性能优化**:在一些实例中,可以看到对CSS性能的优化,如减少选择器复杂性、合并同类选择器、使用内联样式和重要性注解(`!important`)等,以提高页面加载速度。 通过《CSS禅意花园》的学习,开发者可以...

    css图片下载器

    因此,合理合法地使用图片资源,是每个仿站者必须遵循的原则。 总的来说,CSS图片下载器是仿站者不可或缺的辅助工具,它简化了图片资源获取的流程,提高了仿站的效率,同时也有利于保持设计的一致性和专业性。随着...

    CSS权威指南(第三版)

    此外,书中还会涵盖CSS设计原则,例如避免冗余和优先级问题的处理,以及如何通过CSS来实现响应式设计、动画效果和过渡效果。 在讨论CSS2和CSS2.1时,本书也会提及一些在后续CSS3版本中新增的模块,虽然这些内容不在...

    css禅意花园代码/css禅意花园代码/css禅意花园代码

    8. **CSS Hack与条件注释**:早期的Web设计需要应对不同浏览器的差异,项目中可能包含一些针对特定浏览器的CSS Hack和条件注释,这对于了解Web历史和技术演进很有帮助。 通过解压"css禅意花园代码.rar"文件并查看...

    原子类css提高css开发效率

    这可能不符合语义化原则,需要谨慎平衡。 总结起来,原子类CSS是一种优化CSS开发的方法,通过将样式拆分为最小单位,提高代码的可读性和可维护性。虽然它有潜在的缺点,但当正确地应用和管理时,它可以显著提升开发...

    css_usage.zip

    标题“css_usage.zip”暗示了这个压缩包可能包含与CSS(层叠样式表)的使用相关的资源或工具,可能是为了帮助优化和简化CSS代码。...使用此类工具,配合理解上述CSS优化原则,能够显著提升网站的用户体验和加载速度。

Global site tag (gtag.js) - Google Analytics