本文转载:www.52css.com
在前几天的文章中,我们讨论过书写高效CSS注意的七个方面。今天我们讨论如何书写可维护的CSS代码?
一、在样式表开头添加一个注释块,用以描述这个样式表的创建日期、创建者、标记等备注信息。
Example Source Code [www.52css.com]
/*
---------------------------------
Site:Sitename
Author:52CSS.com
Updated:Dateandtime
Updatedby:Name
---------------------------------
*/
二、包括公用颜色标记
Example Source Code [www.52css.com]
/*
---------------------------------
COLORS
Bodybackground:#def455
Containerbackground:#fff
MainText:#333
Links:#00600f
Visitedlinks:#098761
Hoverlinks:#aaf433
H1,H2,H3:#960
H4,H5,H6:#000
---------------------------------
*/
三、给ID和Class进行有意义的命名
Example Source Code [www.52css.com]
不推荐的命名方式:
.green-box{...}
#big-text{...}
推荐使用的命名方式:
.pullquote{...}
#introduction{...}
四、将关联的样式规则进行整合
Example Source Code [www.52css.com]
#header{...}
#headerh1{...}
#headerh1img{...}
#headerform{...}
#headera#skip{...}
#navigation{...}
#navigationul{...}
#navigationulli{...}
#navigationullia{...}
#navigationullia:hover{...}
#content{...}
#contenth2{...}
#contentp{...}
#contentul{...}
#contentulli{...}
五、给样式添加清晰的注释
Example Source Code [www.52css.com]
/*
---------------------------------
headerstyles
---------------------------------
*/
#header{...}
#headerh1{...}
#headerh1img{...}
#headerform{...}
/*
---------------------------------
navigationstyles
---------------------------------
*/
#navigation{...}
分享到:
相关推荐
为了更好的规范代码,书写干净轻巧易于维护管理的css
内容包含: CSS书写规范 如何写出 高效易懂的CSS代码 CSS效率优化建议; 新手或者追求优化性能的同学 值得一看
书写可维护的CSS代码,是每一个网页制作者期望做到的事情,可往往不是那么称心如意,所以本文的出现时有必要的了,解析来介绍5条准则,感兴趣的你可以参考下,希望可以帮助到你
第 1-10章为第 1部分,依次讲解了 Web开发标准与网页网站制作,Web标准布局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属性、CSS容器属性、CSS定义文本属性、元素的修饰和 CSS...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 0 Strict//EN" " http://www w3 org/TR/xhtml1/DTD/xhtml1-strict dtd ">代表文档类型,大致的意思就是:遵循严格的XHTML1的格式书写 具体文档类型后面有介绍(见文档类型),...
如果希望网页美观、大方,并且升级轻松、维护方便,就需要使用CSS,实现结构与表现的分离。 CSS样式 在HTML编写过程中我们除了应用基本的标签元素还会使用css样式来丰富界面使之有不同的呈现效果。 未设置css样式 ...
有些时候是源于一开始书写时的混乱和草率,有时候也是因为后期的维护和各种HACK的需要,但不管如何,书写出干净、易于管理的CSS很简单,下面是10条改进的方法:1.井井有条。和许多其他的事情一样,首先要保持一个...
关于书写习惯,遵循曾经 总结过的风格 标准,现在一点都没有变。并且近来翻看高手作品,横向连排似乎在大产品项目中逐渐成为主流,个人认为如此维护效率的确更高,并且未来显示器肯定是朝越来越大、越来越宽发展。 ...
非前端开发工程师,往往因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目 Less介绍 Less是一门css预处理语言,它扩展了css的动态特性。在css的基础上引入了变量、运算、函数等功能。 常见的预处理器:...
AvaloniaCSS 前端开发库 /** * author : Alex ... * tools: gulp,sass,browser-sync ...1,强制要求所有缩进为4个空格符,保持统一的代码书写风格,方便后续开发人员的继续维护工作。 2,CSS命名规范参考element-ui的
内容索引:脚本资源,Ajax/JavaScript,CNLTreeMenu 一个无限级的JS+CSS树形菜单插件,CNLTreeMenu v1.2,调用方法简单...采用HTML,CSS,JavaScript代码分离方式书写,易于维护修改,并通过W3C标准校验,运行示例如上图。
统一了团队的编码风格,方便阅读代码和维护代码提高代码质量,解决隐藏的代码问题codelint用了哪些工具lint?eslint;用于对代码质量为主,代码风格为辅的校验(包含vue,js,ts,json等文件)stylelint;用于对样式...
3. 个人想写在网上与别人分享的东西(如文章、感想等),其它人可对相同的问题发言等。 4. 需要有身份管理界面。注册、发言记载等。游客只允许浏览,注册用户可以发言。 5. 以上网页要求颜色搭配协调(练习用CSS...
采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面...
3、增加:MarkDown解释CSS样式于V4模板SASS中,从而支持更加友好的显示代码区域。 4、增加:专题数据源标签 5、升级:zico升级到v1.5,增加医疗行业图标。 6、修复:内容列表--如节点未允许内容页生成,则不会显示生成...
3.增加:MarkDown解释CSS样式于V4模板SASS中,从而支持更加友好的显示代码区域;4.增加:专题数据源标签;5.升级:zico升级到1.5,增加医疗行业图标;6.修复:内容列表--如节点未允许内容页生成,则不会显示生成按钮;7....
3、增加:MarkDown解释CSS样式于V4模板SASS中,从而支持更加友好的显示代码区域。 4、增加:专题数据源标签 5、升级:zico升级到v1.5,增加医疗行业图标。 6、修复:内容列表--如节点未允许内容页生成,则不会显示生成...
所有开发人员必须遵循国际标准,遵循公司的目录和文件名命名规则,统一编程书写规则和变量命名规则,使用统一的CSS样式表等。 模块化开发原则 根据网站的规划划分模块,进行模块化开发,提高代码的重用性和维护性...