CSS经验分享:如何书写可维护的CSS代码01
2024-09-20 05:07:27
转自:http://www.cnblogs.com/hxling/archive/2013/02/21/2920520.html
一、在样式表开头添加一个注释块,用以描述这个样式表的创建日期、创建者、标记等备注信息。
Example Source Code: /* --------------------------------- Site: Site name Author: 52CSS.com Updated: Date and time Updated by: Name --------------------------------- */ |
二、包括公用颜色标记
Example Source Code: /* --------------------------------- COLORS Body background: #def455 Container background: #fff Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 --------------------------------- */ |
三、给ID和Class进行有意义的命名
不推荐的命名方式:
Example Source Code: .green-box { ... } #big-text { ... } |
推荐使用的命名方式:
Example Source Code: .pullquote {... } #introduction {... } |
四、将关联的样式规则进行整合
Example Source Code: #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation { ... } #navigation ul { ... } #navigation ul li { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... } |
五、给样式添加清晰的注释
Example Source Code: /* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... } |
最新文章
- 回溯法求n的全排列
- iOS & Mac JSON To Model
- query判断值是否为空,针对前台提交数据的校验
- 深入浅出设计模式——享元模式(Flyweight Pattern)
- Kafka深入理解-2:Kafka的Log存储解析
- linux 搭建hexo博客
- 在phpmyadmin中执行sql语句出现的错误:Unknown storage engine 'InnoDB'
- web/jdbc数据库带实例名连接2008
- RegExp.exec
- pm grant 命令
- hadoop1.X安装
- JQ第一篇
- HTTP请求中POST与GET的差别
- Sublime Text 使用教程
- svn的基本使用方法
- 一点理解之 CmBacktrace: ARM Cortex-M 系列 MCU 错误追踪库
- poj2417 bsgs算法非逆元模板,用于求解A^x=B(mod C)的方程
- Dispatch Queue 之 Invoke 当前队列
- PostMessage与PostThreadMessage的差别
- OAuth2认证有一定的了解
热门文章
- poj 1659 Frogs' Neighborhood( 青蛙的邻居)
- 【HDU 6021】 MG loves string (枚举+容斥原理)
- PHP 笔记——PDO操作数据库
- 【贪心】BZOJ3668-[NOI2014]起床困难综合症
- Android签名有什么作用?
- [NC13A]反蝴蝶效应/[SPOJ-NPC2014D]General Joke
- 如何在SpringBoot当中上传多个图片或者上传单个图片 工具类
- Pandas中Series和DataFrame的索引
- MyEclipse2015创建配置Web+Maven项目
- Git与SVN