• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 让CSS代码更具有易维护性

让CSS代码更具有易维护性

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,易维护性等相关知识,佚名 希望在学习及工作中可以帮助到您
有些时候是源于一开始书写时的混乱和草率,有时候也是因为后期的维护和各种HACK的需要,但不管如何,书写出干净、易于管理的CSS很简单,下面是10条改进的方法:
1.井井有条。
和许多其他的事情一样,首先要保持一个良好的组织性,而不是想到ID就写ID,想到CLASS就写CLASS,而要使样式表保持一个连贯的结构,这能让你充分的利用样式的继承。首先定义你最常用的项目,然后是不太常用到的然后是其他,这会使你的CSS属性得到正确的继承,当你需要重新定义一个特殊的风格时会很简单,也会使得你以后对该CSS的修改和编辑更加迅速,因为它遵从简单、可读、有逻辑的结构。
一个良好的CSS结构应该包括以下一些部分:
  1. 重置和覆盖(Resets & overrides)
  2. 链接和字体(Links & type)
  3. 主要布局(Main layout)
  4. 次要布局结构
  5. 表单元素
  6. 杂项

下图展示的就是一个示例:

2.风格名称、创建时间、签名。
让别人知道是谁写的样式表,当他们有问题的时候可以及时的请教,这在制作模板或者主题以及团队合作时非常有用。

swatch colors里记录了此风格用到的一些颜色色值,和它们对应的颜色描述,这么做是方便以后的编辑工作,你不用再打开PS或者其他取色软件在去找颜色,翻到样式顶部拷贝即可。

3.制作一个模板库。
每次当你制作完一个样式表时,你可以去除那些不通用的东西,然后把文件保存为一个CSS模板以备以后之用。
可以保存成多种用途的各个版本:两列布局、博客布局、打印样式、移动设备样式等等。coda有一个很棒的剪辑功能,可以帮你很容易的保存模板。许多其他的编辑器也有类似的功能,即便是简单的文本批处理也可以很好做出一个模板库来。
每次都从头重写每一个代码实在太疯狂,特别是当你使用相同的公约和方法。

4.使用有用的命名约定。
你可能注意到在第一条建议里的示例里,定义了一对ID叫:col-alpha 和 col-beta,为什么不直接叫col-left 和 col-right?想想我们未来要做的工作,
来年也许你要将左侧的内容调整到右侧,你不应该重新命名你的HTML元素和重命名样式表的id而只是为了移动一下位置。
是的,也许你说你可以把左侧移到右侧而不改动它的HTML元素ID名,依然叫col-left ,但是这会是多么混乱啊,ID描述的是左侧,那就应该让它始终待在左侧,而不是背道而驰。
CSS的一个主要优势就是表现与内容的分离,你完全可以不用动HTML,而只是修改CSS去重新设计你的网站,所以不要使用有限制的命名,而更多的使用通用的命名约定并且要保持一致。
让那些位置以及具体描述表现的词语远离你的CSS,类似.link-blue这样的class命名只会给你今后带来更多的工作,或者当你需要把蓝色链接换成红色的时候让样式表更加杂乱。
元素命名最好是基于它们是什么,而不是它们看起来像什么。比如:.comment-beta比.comment-blue更加通用,而.post-largefont比.post-title更加受限制。

5.连字符而不是下划线。
老式的浏览器解析CSS的下划线容易出现问题,或者根本不支持。为了更好的向后兼容,使用连字符比下划线要好。

6.不要重复你自己。
尽可能的利用分组声明属性,而不是每次重新声明,如有H1\H2两个元素都使用相同的font size color margins那就用逗号,把它们分在一个组内:
This:

尽可能的使用CSS缩写,如有margin值如下:

7.优化轻型样式表。
通过以上的建议,你已经大大减小了样式表的大小,小就意味着更快速更容易保持和升级。
裁剪你不需要的尽可能的通过组来合并,谨慎使用整体的CSS框架,你会发现里面有许多你用不到的东西。
另外一个让CSS更小的建议是,你不用为0添加单位,如0px,直接写0就好了。

8.先针对Gecko内核浏览器写基础样式,然后再在Webkit和IE内核的浏览器上调整。

9.验证。
如果你卡壳了,或者你的布局并不是你想要的效果,可以使用W3C’s free CSS validator验证你的CSS,它将会给你指出你的CSS错误。

10.保持干净的CSS作用域。
通过使用JS判断客户端判断以及浏览器注释等方法,分离针对不同浏览器的样式到各自独立的样式表,使用这种方法可以避开肮脏的HACK出现在你的样式表,保持干净和更好的维护性。

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06纯CSS3实现地球自转实现代码(图文教程附送源码)
  • 2017-08-06css通过伪类来设置超链接样式附示例
  • 2017-08-06网页排版 5个CSS基础
  • 2017-08-06CSS伪类对象before和after的用法实例详解
  • 2017-08-06CSS水平对齐示例介绍
  • 2017-08-06IE7下当position:fixed遇到text-align:center的解决方法
  • 2017-08-06在IE8 FF中使用padding设置select控件文字垂直居中
  • 2017-08-06css3气泡 css3关键帧动画创建的动态通知气泡
  • 2017-08-06浏览器如何判断css优先级
  • 2017-08-06元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解CSS3中@media的实际使用
    • -moz-user-select与onselectstart 禁止选择文字的方法
    • 使用Sass来编写面向对象的CSS代码
    • IE 6不支持min-height或max-width等属性的完美解决方案
    • css中border:none;与border:0;的区别说明
    • CSS a:hover伪类在IE6下的问题
    • CSS之Position全面认识
    • CSS 分页效果制作实例教程
    • css3+jq创作含苞待放的荷花
    • css实现跨浏览器的盒阴影效果告别图片实现类似效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有