提高编写CSS代码效率的10个习惯

提高编写CSS代码效率的10个习惯

1、保持一贯性。

就像其它的任何事一样,值得一直保持一贯性。保持连贯性,而不是想到什么就给id和class命名什么。

CSS的级联样式有利于加深你的记忆,而且充分利用样式的继承去设置样式表。

首先声明通用的部分的样式,然后继续声明不通用的。这样当你需要的时候更容易的去覆盖一个特定的样式。因为样式更易于阅读和更具逻辑性,你会发现编写CSS更迅速。

使用一种最是适合你的方式。
复位和覆盖
链接和类型
主要布局
二次布局结构
表单元素
杂项

 

2、注释标题,日期和签名

当样式被重写的时候遇到问题,可以很方便的找到是原始样式的编写者。当设计模板或者主题的时候这也是一个很好的习惯。
稍等…什么是swatch colors(色板颜色)?根据多年的经验,我发现在样式表中添加通用颜色的列表注释,在开始编写代码和以后的维护代码都是好非常有帮助的。

节省了你打开photoshop来取色的或者打开网站的风格指南文档的步骤。当你需要指定的蓝色,滚动到顶端的注释找到相关颜色代码复制即可。

 

3、整理出一套模板库

一旦你决定使用一种结构,删除不是多余的部分留下主框架并且保存一个通用样式模板以备以后使用。

同时你可以保存多种版本的模板已适应不同结构的网站。

如:2列布局、博客布局、等等…。Coda(苹果系统下的编辑器)http://www.panic.com/coda/ 有很强的编辑功能,让你的编写代码更加容易。其它的编辑器也有类试的功能,只要使用相同的批处理文件,就会工作很nicely。

如果每次都从头,尤其每次以相同的习惯和方法写一遍样式,会让人很抓狂。

 

4、使用有用的命名规则

尤其在我声明一个列的id同时将它们命名为col-alpha和col-beta的地方注意一下。为什么不叫col-left和col-right?

时常需要想想将来的编辑。

明年你可以需要重新设计你的网站并移动左右边栏。你不应该因为仅仅改变了位置而去重名你的html元素并重命名你的样式id。

当然,你只需要重新定义元素的左右列的位置并保持这id仍然为#col-left,但是就会产生让人困惑的问题?如果是叫left,不要指望它一直是实现居左的。这样在移动元素以后,不会给你太多的空间的命名方式。

CSS的优点之一就是让内容现实不同风格能力。你重构网站的时候,完全可以只是修改CSS而不去修改HTML。

因此,不要让因为CSS的名字而局限。通过使用更通用的命名约定并保持一致性。

给位置或者样式以固定的命名方式。如命名一个叫.link-blue的class将会让你麻烦不断,当客户要求你讲链接的蓝色改成橘色的时候将会让你的样式变的很凌乱不堪。

因此命名的规则建立在他们是什么,而不是他们看起来像什么。例如,

通用方面:.comment-deta > .comment-blue
约束方面:.post-title > .post-largefont
.comment-deta更通用,.post-title约束更少。

 

5、使用连字符而不使用下划线

有些比较老的浏览器对取得带下划线的CSS会出现问题,或就是不支持下划线。

因此为了让代码拥有更好的向后兼容性,培养使用连字符成为一个习惯。使用#col-alpha 而别使用 #col_alpha。

 

6、避免重复定义

重复的属性尽可能避免重复定义,而需要分组定义元素的属性。如果您的h1和h2元素都是使用相同的字体大小、颜色、和边框等,他们完全和可以合并成组定义。

同时尽可能使用样式的简写方式。时常对一些相同定义的元素进行合并和定义使用简写。
详细写法:
简单写法:
你了解CSS解释中的顺时针上、下、左、右简写方式,这是相当重要。
另外,如果你的顶部和底部,或者左边和右边的属性是相同的,你只需要两个命名。
例子中意思是距离顶部和底部都是1em,距离左右都是0em。

7、优化使样式轻量化。

使用好上边的提示,你才会真正的减少你的样式表的大小。越小越容易加载,越小越容易维护及更新。
尽可能采用分组,删除不需要的样式。

另一种CSS常用简写:当值为零的时候,你可以不指定度量单位。如果边距设置为0,你不用定义成0px或者0em。无论测量单位是什么0都是0,同时CSS是可以识别的。

 

8、代码基于火狐编写,然后针对webkit内核浏览器和IE浏览器进行调整

首先解决CSS在火狐浏览器下的一些让人头疼的问题。如果CSS在火狐下都有问题,其它浏览器下更可能出现问题。

 

9、进行验证

请使用W3C的CSS验证器进行验证。如果你坚持认为你的布局没有什么可以修改的时候,你可以使用CSS验证器对找出错误会有很大帮助。

 

10、保持页面的整洁性

支持单独的浏览器使用单独的CSS独立的样式表,同时javascript需要的样式、服务器端需要的样式、评论的样式。这样就可以避免一些不必要的ie的hack。只有这样才会保证样式的整洁性和可管理性。

转载于:https://www.cnblogs.com/taocom/archive/2012/10/12/2721777.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/576223.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hdu 1257 最少拦截系统 (DP)

点击打开链接 #include"stdio.h" int main() {int a[10011],b[10011];int i,j,c,n;while(scanf("%d",&n)!EOF){c1;for(i0;i<n;i)scanf("%d",&a[i]);b[0]a[0];for(i1;i<n;i){for(j0;j<c;j){if(a[i]<b[j])break;}b[j]a[i];if(…

C++ 友元函数

生活中你的家有客厅(Public),有你的卧室(Private) 客厅所有来的客人都可以进去&#xff0c;但是你的卧室是私有的&#xff0c;也就是说只有你能进去 但是呢&#xff0c;你也可以允许你的好闺蜜好基友进去。 在程序里&#xff0c;有些私有属性也想让类外特殊的一些函数或者类进行…

九度1377缓变序列

#include<stdio.h> #include<string.h> int n,m,k,i,j,minN,a[10003]; main() {while(~scanf("%d",&n)){memset(a,0,sizeof(a));minN0x7ffffff,m0,j0;for(i0;i<n;i)scanf("%d",&k),minNminN<k?minN:k,a[k]0?m:0,a[k];if(m1)pr…

关于计算机类课程实验教学的思考

由于计算机机房的限制&#xff0c;没有安装投影仪以及计算机控制管理软件&#xff0c;所以单纯的讲解效果非常不好。老师在上面讲&#xff0c;学生在下面干什么根本不知道。由于教授的实验课和理论课关系不是非常密切。试验的主要内容是网页设计&#xff0c;也就是如何利用Drea…

第四章类和对象 习题答案

一&#xff0e;选择题1.能提供封装的C的下列关键字是&#xff08;C&#xff09;A.whileB. unionC. classD. for2.在下面所列项中&#xff0c;不是面向对象的特点的是&#xff08;C&#xff09;A. 多面性B. 抽象性和封装性C. 多线程和多任务D. 继承性3.下面选项中&#xff0c;对…

在Javascript中闭包(Closure)

一、什么是闭包&#xff1f; “官方”的解释是&#xff1a;所谓“闭包”&#xff0c;指的是一个拥有许多变量和绑定了这些变量的环境的表达式&#xff08;通常是一个函数&#xff09;&#xff0c;因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话&#xff0c;因…

C++ 文件写操作

#include <fstream> #include<iostream> using namespace std;void test01(){ofstream ofs;ofs.open("test.txt",ios :: out);ofs << "姓名:张三"<< endl;ofs << "性别:男"<< endl;ofs << "年龄…

JS如何获取URL

JS如何获取URL 一、var urldocument.location; url "www.abc.com/sports/def.aspx"; var r /\/(\w)\.aspx/; alert(url.match(r)[1]); alert(r.exec(url)[1]);二、 var url document.locationurl " http://localhost:8080/Customer/index?tokenghfghfghfghfg…

winform 分页控件分享(二)

大数量分页&#xff0c;使用存储过程。 这个存储过程是网络上考的&#xff0c;呵呵。我把它给贴出来&#xff0c;希望原作者别砸我砖头。。。。。 ALTER PROCEDURE SP_Pagination/**//****************************************************************** 千万数量级分页存…

C++ 二进制文件写操作

#include<iostream> using namespace std; #include<fstream>class Person { public:char m_Name[64]; //姓名int m_Age; //年龄};void test01(){//1、包含头文件//2.创建流对象ofstream ofs("person.txt",ios::out | ios::binary);//3、打开文件//ofs.o…

转载:数据库表结构设计方法及原则

在目前的企业信息系统中&#xff0c;数据库还是最佳的数据存储方式&#xff0c;虽然已经有很多的书籍在指导我们进行数据库设计&#xff0c;但应该那种方式是设计数据库的表结构的最好方 法、设计时应遵从什么样的原则、四个范式如何能够用一种方式达到顺畅的应用等是我一直在思…

C++ 二进制文件读操作

读二进制文件 二进制方式读文件主要利用流对象调用成员函数read 函数原型:[ istream& read(char *buffer,int len); 参数解释:字符指针buffer指向内存中一段存储空间。len是读写的字节数 示例: #include <fstream> #include <string> #include<iostream>…

成为中国最好的Magento开发公司

MEC电子商务是国内首家Magento定制服务公司。 对于Magento开发&#xff0c;我们的目标是做中国最好的Magento开发公司&#xff0c;但这是一个无止境的追求&#xff0c;从我们2007年创立之初至现在我们积累了大量国际知名品牌的案例&#xff0c;发布了3个MEC Magento系列产品&am…

基于USB通信的开关量输入输出板

难点在于usb通信。以及上位机程序 两个方案&#xff1a; 1.基于stm32的&#xff0c;自带usb口&#xff0c;tqfp100封装&#xff0c;可以保证16输 入&#xff0c;16输出的i/o。 2.基于cy68013fpga的方案&#xff0c;有现成的开发板&#xff0c;应该上手 很快。需要熟悉fpga和680…

C++ 使用模板Template

template --声明创建模板I typename -- 表面其后面的符号是一种数据类型&#xff0c;可以用class代替 T --- 通用的数据类型&#xff0c;名称可以替换&#xff0c;通常为大写字母 使用模板之前&#xff1a; #include<iostream> using namespace std; #include<strin…

程序员常用字体(vs2008字体修改方案)

字体不仅是设计师手中重要的武器&#xff0c;对我们开发人员来说&#xff0c;字体的选择也有许多讲究&#xff0c;一个好的、适合展示代码的字体&#xff0c;应该具备以下要素&#xff1a; 等宽的字符简洁、清晰并且规范的字符形状支持ASCII码为128以上的扩展字符集与字符同等宽…

C++ 使用模板需要注意的事情

总结: ●使用模板时必须确定出通用数据类型T,并且能够推争出一致的类型 #include<iostream> using namespace std; #include<string> #include<fstream>//函数模板注意事项 template<class T> //typename 可以替换成class void mySwap(T&a, T&am…

三分法解决凸(凹)函数极值问题

二分法只适用与线性函数&#xff0c;当函数脱离线性而呈现凸性或者凹性的时候&#xff0c;三分是很有必要的。 三分过程如下图&#xff1a; 凸函数&#xff1a; 凹函数&#xff1a; 实现方法&#xff1a; double Calc(double p) {/*...*/ }double Solve(double MIN, double MAX…

C++ 普通函数和模板函数调用规则

/** 调用规则如下: 1.如果函数模板和普通函数都可以实现&#xff0c;优先调用普通函数 2.可以通过空模板参数列表来强制调用函数模板 3.函数模板也可以发生重载 4.如果函数模板可以产生更好的匹配, 优先调用函数模板 */ 总结:既然提供了函数模板&#xff0c;最好就不要提供普…

计算机网络原理(第一章)课后题答案

第一章 1.什么是计算机网络&#xff1f; 计算机网络是互联、自治的计算机集合 自治&#xff1a;计算机系统彼此独立&#xff0c;不存在主从或控制与被控制的关系 互联&#xff1a;利用通信线路链接&#xff0c;连接相互独立的计算机系统 2.网络协议的三要素是什么&#xf…