[css 揭秘]:CSS编码技巧
CSS编码技巧
我的github地址:https://github.com/FannieGirl/ifannie
喜欢的给我一个星吧
尽量减少代码重复
- 尽量减少改动时需要编辑的地方
- 当某些值相互依赖时,应该把它们的相互关系用代码表示出来
- 代码易维护 VS 代码量少
- currentColor —— CSS有史以来第一个变量
- inherit可以用在任何CSS属性中,而且它总是绑定到父元素的计算值
关于响应式网页设计
- 每个媒体查询都会增加成本
- 媒体查询的端点不应该由具体设备来决定
建议:
使用百分比长度取代固定长度。如果实在做不到这一点,也应该尝试使用与视口相关的单位(vw、vh、vmin 和 vmax),他们的值解析为宽度或高度的百分比。
当你需要在较大分辨率下得到固定宽度时,使用max-width而不是width,因为它可以适应较小的分辨率,而无需使用媒体查询。
不要忘记为替换元素(比如img、object、video、iframe等)设置一个max-width,值为100%。
加入北京图片需要完整地铺满一个容器,不管容器的尺寸如何变化,background-size:cover这个属性都可以做到。但是,我们也要时刻牢记——带宽并不是无限的,因此在移动网页中通过CSS把一张大图缩小显示是不太明智的。当图片(或其他元素)以行列式进行布局时,让视口的宽度来决定列的数量。弹性盒布局(即FlexBox)或者display:inline-block加上常规的文本折行行为,都可以实现这一点。
在使用多列文本时,指定column-width(列宽)而不是指定column-count(列数),这样他就可以在较小的屏幕上自动显示为单列布局。
总的来说,我们的思路是尽最大努力实现弹性可伸缩的布局,并在媒体查询的各个端点区间内指定响应的尺寸。
合理使用简写
1.在使用展开式属性的写法时,通常会遇到这样的问题:展开式写法并不会帮助你清空所有相关的其他属性,从而可能会干扰你想要达到的效果。
当然,可以把所有的展开式户型全部设置一遍,但可能会漏掉几个;或者,CSS工作组在未来引入更多的展开式属性。
合理使用简写是一种良好的防卫性编码方式,可以抵御未来的风险。当然,如果我们要明确地去覆盖某个具体的展开式属性并保留其他相关样式,那就需要用展开式属性。
我们应该使用预处理器吗?
如果使用得当,在大型项目中可以让代码更加灵活。但是预处理器也不是完美无缺的:
- CSS的文件体积和复杂度可能会失控
2.调试难度增加 - 预处理器在开发或城中引入了一定程度地延时
- 每次抽象都必然会带来更高的学习成本
5.他们都有自己的bug - 很多受预处理器启发的特性都已经以各种方式融入到原生的CSS中了。
建议是,在每个项目开始时使用纯CSS,只有当代码变得开始无法保持DRY时,才切换到预处理器方案。为了避免可能发生的“依赖”或“滥用”,在引入预处理器的问题上需要冷静的决定,不应该在每个项目一开始时就不懂脑筋顺着惯性来。
css 揭秘的第一章 告诉你整体写css的一些技巧。大方向的指导,这些坑我是一个一个踩过来的。有一种相见恨晚的感觉,不过呢,自己不踩怎么印象深刻,吸取教训呢。后面的章节是细节的css技巧,我很是期待,向css更高级进发,每一个技巧,每一段代码都应该去实践,你能够深刻的去理解吧!
书已到手里,学到一个技巧,就应该记录下来。这些都是自己走过来的路。尽管写的很辣鸡,如果你看到了,非常感谢,尽管来吐槽我吧!跪求虐
我的github地址:https://github.com/FannieGirl/ifannie
喜欢的给我一个星吧
感恩你
[css 揭秘]:CSS编码技巧的更多相关文章
- [css 揭秘]-css coding tips
css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...
- [css 揭秘]:CSS揭秘 技巧(三):背景定位
我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...
- CSS编码技巧
前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...
- CSS揭秘 技巧(五):条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- [css 揭秘]:CSS揭秘 技巧(四):边框内圆角
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...
- [css 揭秘]:CSS揭秘 技巧(二):多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
- [css 揭秘]:CSS揭秘 技巧(一):半透明边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...
- [css 揭秘] :CSS揭秘 技巧(五):条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- 《CSS揭秘》笔记(一)
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
随机推荐
- R语言︱数据规范化、归一化
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:规范化主要是因为数据受着单位的影响较 ...
- 电脑开机后,就会自动运行chkdsk,我想取消chkdsk,怎么取消
每次开机都自动检查磁盘,检测通过后下次还是一样,NTFS/FAT32分区都有可能有这样的情况,即使重装系统,仍可能出现同样情况,但是硬盘可以通过Dell 随机带的检测程序解决方法:在命令行窗口中 ...
- List转换成JSON对象报错(二)
List转换成JSON对象 1.具体报错如下 Exception in thread "main" java.lang.NoClassDefFoundError: org/apac ...
- freemarker报错之十五
1.错误描述 六月 04, 2014 11:04:03 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...
- 简单bfs(hdu2612)
#include<stdio.h>#include<string.h>#include<queue>#define INF 0x3f3f3f3fusing name ...
- 护航者,腾讯云: 2017年度游戏行业DDoS态势报告—回溯与前瞻
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯游戏云 前言 自14年开始,全球DDoS攻击持续爆发,攻击峰值不断创记录.2017年,这种依靠超大流量不断冲击服务器和带宽造成业务 ...
- Entity Framework 乐观并发处理
Entity Framework 乐观并发处理 有一段时间没有更新博客了,今天终于有一些时间,和大家讨论一个Entity Framework 乐观并发处理的问题.首先需要说明的是,这里提到的 “并发” ...
- BZOJ第1页养成计划
嗯,用这篇博客当一个目录,方便自己和学弟(妹?)们查阅.不定期更新. BZOJ1000 BZOJ1001 BZOJ1002 BZOJ1003 BZOJ1004 BZOJ1005 ...
- webpack中hash与chunkhash区别和需要注意的问题
项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash 和 chunkhash等. 问题一:hash问题 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法 ...
- javascript ES5、ES6的一些知识
ES6 标签(空格分隔): ES6 严格模式 "use strict" 注意:严格模式也有作用域,如果在某个函数内部声明的话,只在该函数内部有作用 1) 严格模式下全局变量声明必须 ...