——阅读笔记,欢迎纠错^_^

内容比较零散。。。。。

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)的更多相关文章

  1. 高效整洁CSS代码原则(上)

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

  2. 高效整洁CSS代码原则 (下)

    6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*---------------------------- ...

  3. 高效的CSS代码(1)

    ——阅读笔记,欢迎纠错 平时写CSS时常用的两个CSS文档(小杂感觉用的蛮喜欢,也是看了些书,尝试使用效果不错) /************CSS reset *********/ /******** ...

  4. [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 ...

  5. 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

  6. [转] 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

  7. 教你如何写出高效整洁的 css 代码——css优化(转载)

    css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...

  8. Less:优雅的写CSS代码

    css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...

  9. CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog

    原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...

随机推荐

  1. Linux基础-最基础

    Linux基础 为了更好的学习知识,开通此博客,以前博客丢了...记录一下知识点,希望能在这里与大家互相学习交流. 20171113 14:00 Linux基础-基本知识 Linux树状文件系统结构 ...

  2. C# 在RichTextBox中滚动鼠标时滚动的是父窗口的滚动条

    1. RichTextBox u2 = new RichTextBox(); 2. 先记住日RichTextBox没有显示滚动条时的总宽度和显示宽度 u2.Width - u2.ClientSize. ...

  3. 【POJ3254】Corn Fields

    http://poj.org/problem?id=3254 题意:给你一块n*m(0<n,m<=12)的地图,其中有的方格是肥沃的(用1表示),有的方格是贫瘠的(用0表示).现在约翰要在 ...

  4. python 3.6 MJ小工具

    2017.07.14 update 做了个界面,不需要使用cmd命令行+文件路径的方式来使用了: 链接如下: http://www.cnblogs.com/chenyuebai/p/7150382.h ...

  5. day3、Linux快捷键及vim命令快捷键

    Linux命令行快捷键 快捷键: tab键  自动补全路径 目录  名字,  自动不全命令 快捷键: ctrl +l(小写) 清屏 . ctrl +c 取消当前操作 快捷键: ctrl +d(小写) ...

  6. Git 二分调试法,火速定位疑难Bug!

    你一定遇到过,一个很久没修改过的功能,莫名其妙的出现了问题?肉眼查代码.屡逻辑完全找不到问题点?前两天还好好的功能,怎么这个今天就不行了?这两天改动了这么多代码,到底是那一次改动引发的 Bug? 这样 ...

  7. L贪心基础

    <span style="color:#330099;">/* L - 贪心 基础 Time Limit:1000MS Memory Limit:65536KB 64b ...

  8. Error: Failed to launch instance &quot;win7&quot;: Please try again later [Error: No valid host was found. ].

    感谢朋友支持本博客,欢迎共同探讨交流.因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  9. POJ 1469(裸二分匹配)

    COURSES Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18993   Accepted: 7486 Descript ...

  10. BZOJ 1003 [ZJOI2006]物流运输trans SPFA+DP

    题意:链接 方法:SPFA+DP 解析:挺好的题目.因为数据范围较小所以用这样的方式能够搞,只是也是挺不好想的. 我们定义cost(i,j)表示从第i天走到第j天运用同一种方式的最小花费,然后因为数据 ...