首页
酷软
游戏
媒体
- 电影
- 剧集
- 动画
- 记录
- 综艺
- MV
- 有声世界
云资源
源码
更多
- 文库
- 系统
- web
- 站长帮
- 玩电脑
- 玩游戏
- 玩手机
- 涨姿势
- 玩软件
- 云图志
- 看漫画
- 微读书
- PS玩家
- 网文网语
- 硬件数码
- 编程开发
- 神秘之旅
- 福利线报
- 商业资源
- 网赚相关
- 健康加油站
赞助专区
云盘专区
资源阁
缘聚岛
BT种子库

[精彩网文] 如何规范 CSS 的命名和书写？

作者：精品下载站日期：2020-11-14 17:47:27 浏览：63 分类：网文网语

CSS书写顺序

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

CSS书写规范使用CSS缩写属性

CSS有些属性是可以缩写的，如下这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦!

16进制颜色代码缩写

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器，为什么呢?
    输入的时候少按一个shift键;
    浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)
    能良好区分JavaScript变量命名(JS变量命名是用“_”)

不要随意使用Id

id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。　

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

CSS命名规范(规则)常用的CSS命名规则

头header内容content尾footer导航nav侧栏sidebar栏目column中center右right布局宽度wrapper左left登录条loginbar标志logo广告banner页面主体main热点hot新闻news下载download子导航subnav菜单menu子菜单submenu搜索search友情链接friendlink页脚footer版权copyright滚动scroll内容content标签tags文章列表list提示信息msg小技巧tips栏目标题title加入joinus指南guide服务service注册regsiter状态status投票vote合作伙伴partner内容container

注释的写法

/* Header */

内容区

/* End Header */

ID的命名

1)页面结构

容器container页头header内容contentcontainer页面主体main页尾footer导航nav侧栏sidebar栏目column布局宽度wrapper左右中leftrightcenter

(2)导航

导航nav主导航mainnav子导航subnav顶导航topnav边导航sidebar左导航leftsidebar右导航rightsidebar菜单menu子菜单submenu标题title摘要summary

(3)功能

标志logo广告banner登陆login登录条loginbar注册register搜索search功能区shop标题title加入joinus状态status按钮btn滚动scroll标籤页tab文章列表list提示信息msg当前的current小技巧tips图标icon注释note指南guild服务service热点hot新闻news下载download投票vote合作伙伴partner友情链接link版权copyright