尝试规范css代码

1.模块分割,用如下的标注来提示你的css代码作用;
    /* -------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* ----------*/

A sample format I try to stick to is this:

Global Styles – (body, paragraphs, lists, etc)
    Header
    Page Structure
    Headings
    Text Styles
    Navigation
    Forms
    Comments
    Extras

2.代码的统一管理

例如:
        1).标题
                h2 { }

#snapshot_box h2 {
                        padding: 0 0 6px 0; }

#main_box h2 {
                        color: #e2e2e2; }

.sidetagselection h2 {
                        color: #fff;
                        font: bold 14px/14px “Verdana”, sans-serif; }
                        
     you’ll be able to style each one independently and not worry about child classes inheriting attributes from the parent class.
        
3.使用简写
        例如:margin: 0px 1px 0 0;
4.头部样式的使用的重要性;important;
    If you know that all of the h2’s will not have a margin or padding, define that on the top level and let its effect cascade as it is supposed to.

时间: 2024-10-07 18:14:46

尝试规范css代码的相关文章

css代码规范问题重要的有几个

很多人刚开始接触的时候都会遇到很多困难,其中规范的书写格式也较为明显:今天为大家带来一些CSS代码规范的知识. 1.良好的命名规范 ID和class的命名尽可能短,并符合语义.多个单词的拼接用 '-' 符号链接,尽量使用小写字母. 2.代码缩写 CSS代码缩写可以提高你写代码的速度,精简你的代码量. li{font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px;

编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范

不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 因此,编写灵活.稳定.高质量的 HTML 和 CSS 代码,是每一个技术人员的基本操守. HTML ************************************************************************ 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单

google的html、css代码规范(转)

看了一下google的html.css代码规范,简单的作下记录. 一.省略ur地址中的 http: 或 https: 的部分  , 在引用样式表文件.脚本文件.图片以及其它媒体文件时,都可以这样做,除非使用这两种协议都无法获取到资源,也就是说必须使用其它协议才能获取到资源的,就不能省略啦,只有http:和https:是可以省略的.这样做的好处是能减少文件的体积,而且还能避免一些相对url中混乱问题的产生. <!-- 不推荐 --> <script src="http://www

编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范(转)

今天看了Bootstrap中文网关于编码规范的文章,觉得很受用,赶紧记下来. 首先是黄金定律:永远遵循同一套编码规范.不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML部分语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格) 对于属性的定义,确保全部使用双引号,绝不要使用单引号 不要在自闭(例如,<meta> 或 <img>)元素的尾部添加斜线 -- HTML5 规范中明确说

Emmet:HTML/CSS代码快速编写规范(转发)

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:  Zen coding下的编码演示 去年年底,该插件已经改名为Emmet.但Emmet不只改名,还带来了一些新特性.本文就来直观地演示给你. 一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你

20个编写现代CSS代码的建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2

如何写出优雅的CSS代码 ?(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

高效的CSS代码(2)

——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><div class="fl"></div></div> /*意思就是最外面的一层<div></div>是父容器,给他加上清除浮动的功能,clearfix的代码再高效的CSS代码(1)中有*/ 2.再写代码前不是要先分析一下页面的模块吗,模块

CSS代码重构

CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高CSS代码性能主要有两个点:1.提高页面的加载性能提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存2.提高CSS代码性能不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的 提高代码的可维护性 提高CS