总结了部分所学、所听、所看、所问的一些CSS写作经验,书写高效的CSS - 漫谈CSS的渲染效率,它们与渲染效率及所占用消耗的资源有一定的关联。部分为自己理解所写,不排除会有错漏,欢迎提供更好的意见。
1、十六进制的颜色值对位数与大小写
编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议用 - color:#FF33AA;
2、display与visibility的差异
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。
* 不赞成 - visibility:hidden;
* 建议用 - display:none;
3、border:none;与border:0;的区别
和display与visibility的关系类似,分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框,但它会为你保留border-color/border-style的使用权。
* 不赞成 - border:0;
* 建议用 - border:none;
4、不宜过小的背景图片平铺
一张宽高1px的背景图片,虽然文件体积非常之小,但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关,最大的图片文件体积保持约70KB。
* 不赞成 - 宽高8px以下的平铺背景图片
* 建议用 - 衡量适中体积及尺寸的背景图片
5、IE的滤镜
IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜,可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明,因为IE7以上已经支持了PNG透明。
* 不赞成,滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用,最好选择其它方法能避免使用滤镜。
6、*{ margin:0; padding:0;}避免浏览器样式差异
*号通配符把所有标签都初始化一遍,浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异,或是某些已经不推荐使用的标签(因为你不会去用它),它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成,使用*号通配符
* 不赞成,div span button b table等标签纳入通配符控制内外填充样式
* 建议用,有选择性地使用通配符控制内外填充样式。
7、不要添加额外的标签来描述class或id
如果你有一个选择器是以id作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 - button#backButton { }
* 不赞成 - .menu-left #newMenuIcon { }
* 建议用 - #backButton { }
* 建议用 - #newMenuIcon { }
8、尽量选择最特殊的类来存放选择器
降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 - treeitem[mailfolder="true"] > treerow > treecell { }
* 建议用 - .treecell-mailfolder { }
9、避免子孙选择符
子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。
* 不赞成 - treehead treerow treecell { }
* 好一点,但还是不行(参照下一条) - treehead > treerow > treecell { }
10、标签类中不要包含子选择符
不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)
* 不赞成 - treehead > treerow > treecell { }
* 建议用 - .treecell-header { }
11、留意所有子选择符的使用
小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。
* 不赞成 - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。
* 建议用 - .tree-folderpane-icon[IsImapServer="true"] { }
分享到:
相关推荐
### CSS书写高效的CSS-CSS的渲染效率 在前端开发领域,CSS(层叠样式表)是构建网页布局、样式和视觉效果的关键技术之一。优化CSS不仅能够提升网站性能,还能改善用户体验。本文将从几个方面探讨如何通过改进CSS...
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip ...学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.z
Postcss-px-to-viewport插件是前端开发者实现响应式设计的利器,它简化了从像素单位到视口单位的转换过程,提升了开发效率。了解并掌握这个工具的使用,有助于构建更具适应性的网页,为用户提供更佳的浏览体验。在...
`typed-css-modules`就是这样一个工具,它将CSS模块化与类型安全相结合,为JavaScript(尤其是TypeScript)项目提供强大的样式支持。这个开源库旨在帮助开发者从`.css`文件生成对应的`.d.ts`类型定义文件,确保在...
通过`postcss-import-resolver`,开发者可以更好地管理和控制CSS导入,降低代码维护的难度,提升开发效率。同时,这个开源库也鼓励社区贡献,如果你有更高效的解决冲突策略,可以考虑对其进行改进并分享给其他人。
HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...
《CSS经典练习——css-diner-develop深度解析》 在IT领域,HTML前端和CSS是构建网页界面的基础。其中,CSS(层叠样式表)尤为重要,它负责定义网页的布局、颜色、字体等视觉效果。"css-diner-develop"是一个专为CSS...
"前端开源库-postcss-banner"就是一个这样的工具,它专注于一个特定的任务:向生成的CSS文件添加文本横幅。这个库是基于PostCSS构建的,PostCSS是一个强大的CSS处理器,能够转换CSS代码,添加未来特性或者进行各种...
**总的来说,"HTML-CSS-JS Prettify"是Sublime Text用户提高代码质量和工作效率的一款利器,特别是在处理大量混乱代码时,它能快速地将代码整理得井井有条,帮助开发者更好地专注于编写和理解代码。**
`get-css-urls`是一个开源库,专为开发者提供了一种高效的方法,用于从CSS字符串中提取URL链接。这个库主要服务于那些需要解析、操作或处理CSS文件中的URL的场景,比如静态资源的自动化构建流程、CDN部署或者CSS预...
【前端开源库-export-css-loader】是一个专为前端开发者设计的开源工具,主要功能是处理CSS加载。在前端开发中,CSS通常与JavaScript紧密关联,尤其是在使用Webpack等模块打包工具时,需要有效地管理和处理CSS资源。...
css-cheat-sheet,css-cheat-sheet,css-cheat-sheet
在“Semantic-UI-CSS-master.zip”这个压缩包中,我们找到了核心的“Semantic-UI-CSS-master”项目,它包含了构建高效、美观且语义化的网站所需的所有CSS资源。下面,我们将深入探讨Semantic UI CSS的关键概念、设计...
}安装npm install postcss-custom-css-units用法将postcss-custom-css-units插件添加到postcss.config.js module . exports = { plugins : [ require ( 'postcss-custom-css-units' ) ( { baseUnit
CSS Pro布局 CSS库,用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout
postcss-变量-前缀 PostCSS 插件为所有 css 自定义属性添加前缀。 用法 使用 : 在您的项目目录中安装postcss 、 postcss-cli和postcss-variables-prefixer : npm install postcss postcss-cli postcss-...
此外,`css-resolve-import`的使用还涉及到前端构建的最佳实践,如CSS模块化、CSS-in-JS以及预处理器(如Sass、Less)等。通过与这些工具的结合,开发者可以构建出更高效、可维护的前端项目。 `css-resolve-import-...
npm install postcss postcss-js-mixins ``` 2. **配置**:然后,在项目中创建一个PostCSS配置文件(通常为`postcss.config.js`),并添加插件到处理链中: ```javascript module.exports = { plugins: [ require...
### 书写高效的CSS #### 概述 在Web开发领域,CSS(层叠样式表)是一种用于描述HTML或XML文档的外观和格式的语言。随着Web技术的发展与网站复杂度的提升,编写高效的CSS成为了前端工程师的一项必备技能。本文将...
通过集成到PostCSS工作流中,`postcss-copy`为前端开发者提供了更高效、可靠的资源处理方案,从而提高了项目质量和开发体验。在不断发展的前端技术生态中,这样的工具无疑对于提升开发效率和代码质量有着积极的推动...