高效的CSS代码(2)
——阅读笔记,欢迎纠错^_^
内容比较零散。。。。。
1.让浮动元素的父容器根据元素的高度而自适应高度的方法:
<div class="clearfix"><div class="fl"></div></div>
/*意思就是最外面的一层<div></div>是父容器,给他加上清除浮动的功能,clearfix的代码再高效的CSS代码(1)中有*/
2.再写代码前不是要先分析一下页面的模块吗,模块的划分也能间接影响代码的效率,写CSS代码划分模块可以遵循:
1)模块与模块之间尽量不要包含相同的部分,若有相同的部分应将其提出并分成一个独立的模块;
2)尽量提高模块的重用度,就是模块再保证模块数量尽可能少的原则下做到尽可能简单以提高重用度;
3.想必大家都会有时候命名多的时候就不知道怎么给盒子取名字了
1)峰驼式:从第二个单词开始讲首字母大写化;(用于区别不同单词)
2) 划线式:用_或者-来连接命名;(用于表明从属关系)
命名尽量体现从属关系比较好
这两张命名方法不仅仅再CSS中使用再JS或者C等语言也阔以用啊,小杂就只学了两种。。。勿喷。。。。还在努力啊!
PSPSPS:如果是团队合作写代码的话,再写之前团队商量一下,每个人都有自己一个独特的标示符作为前缀避免团队合作代码的冲突啊!!!
3.接下去说个小杂使用后颇有心得而且感觉真真阔以的!——多尝试使用类的组合
!!!记得有段时间再写多个页面,代码命名不言而喻乱七八糟,。。。后来经过类的组合修改。。。代码量大幅度减少,看起来也是一目了然!!!!
4.最好统一使用margin-top或者margin-bottom
为啥?我之前也是乱用,后来再调试浏览器兼容性时候就是个蛋!,经过修改统一margin后竟然好了!具体愿意为啥。。百度有哦~~~
如果不确定模块的上下margin特别稳定,最好不要讲他写到模块里,而是使用类的组合,单独的为上下margin挂用编剧的原子类,而且!!!最好模块不要混用margin-top和margin-bottom,貌似这个后来又修改了只用padding的。。貌似更好;
高效的CSS代码(2)的更多相关文章
- 高效整洁CSS代码原则(上)
CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...
- 高效整洁CSS代码原则 (下)
6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*---------------------------- ...
- 高效的CSS代码(1)
——阅读笔记,欢迎纠错 平时写CSS时常用的两个CSS文档(小杂感觉用的蛮喜欢,也是看了些书,尝试使用效果不错) /************CSS reset *********/ /******** ...
- [css] 【转载】 精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
- 编写高效的 CSS 选择器
高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...
- [转] 编写高效的 CSS 选择器
高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...
- 教你如何写出高效整洁的 css 代码——css优化(转载)
css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...
- Less:优雅的写CSS代码
css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...
随机推荐
- Python操作 Memcache、Redis、RabbitMQ
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- python项目依赖管理分享迁移后重建开发环境(一)virtualenv 和 pip
作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/rebuild-development-environment-with-virtualenv-an ...
- html和css的区别
html(结构) Hyper Text Markup Language(超文本标记语言)用于定义文档内容结构 1.该语言写的代码通常会被浏览器解析执行 2.超文本:不止包括文本,还有图片.链接.音乐. ...
- Windows下Tomcat调优
windows tomcat 优化 1. tomcat conf server.xml 在server.xml中修改以一部分,增加节点数目,可以很好的提高性能: <Connector port ...
- 《JavaScript设计模式》读书笔记——灵活的语言
最近在读JavaScript设计模式这本书,准备搞一个系列来记录所学所想,其实主要原因是方便以后查阅. 第一章主要介绍了JS函数的不同定义与使用方法,用自己的方法去模拟类也是它的独有魅力所在. 首先, ...
- 机房收费系统——转换list泛型时,字段名称不正确应出现故障
因为之前对泛型研究了一番,所以就開始尝试着在机房收费系统重构中增加了泛型的使用. 可是到了做学生查看剩余金额这个功能的时候,还是依照之前的方法做的,可是在载入数据的时候班级这个框就没有显示出来--然后 ...
- Power Designer如何批量改动数据类型
最近做项目的时候须要将OOM转换为PDM.在OOM中转换为PDM时,全部string的类型的属性都默认变为varchar(254),这可不是我们须要的类型,那么.如此多的类.如此多的属性.难道一个一个 ...
- 【日常学习】【线性DP】codevs1044 拦截导弹题解
题目描写叙述 Description 某国为了防御敌国的导弹突击,发展出一种导弹拦截系统.可是这样的导弹拦截系统有一个缺陷:尽管它的第一发炮弹可以到达随意的高度,可是以后每一发炮弹都不能高于前一发的高 ...
- 知名互联网公司校招 Java 开发岗面试知识点解析
天之道,损有余而补不足,是故虚胜实,不足胜有余. 本文作者在一年之内参加过多场面试,应聘岗位均为 Java 开发方向.在不断的面试中,分类总结了 Java 开发岗位面试中的一些知识点. 主要包括以下几 ...
- Linux基础:用tcpdump抓包
简介 网络数据包截获分析工具.支持针对网络层.协议.主机.网络或端口的过滤.并提供and.or.not等逻辑语句帮助去除无用的信息. tcpdump - dump traffic on a netwo ...