博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
推荐大家一个CSS书写规范
阅读量:5899 次
发布时间:2019-06-19

本文共 1854 字,大约阅读时间需要 6 分钟。

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align)

4.背景(background, border)

 

5.其他(animation, transition)

使用CSS缩写属性

 

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0

 

简写命名

 

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

 

16进制颜色代码缩写

 

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

连字符CSS选择器命名规范

 

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

 

2.不能用“_”下划线来命名CSS选择器,为什么呢?

 

    一些浏览器已经不允许使用下划线来命名CSS选择器(就是不兼容);

能良好区分JavaScript变量命名.

 

不要随意使用id

 

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

为选择器添加状态前缀

 

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

 

常用的CSS命名规则

 

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体佈局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签:tags

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

 

 

 

 

 

 

注释的写法:

 

/* Header */

内容区

/* End Header */

 

id的命名:

 

1)页面结构

 

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体佈局宽度:wrapper

左右中:left right center

 

(2)导航

 

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

 

(3)功能

 

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标籤页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

注意事项::

 

1.一律小写;

2.尽量用英文;

3.不加中槓和下划线;

4.尽量不缩写,除非一看就明白的单词。

 

 

CSS样式表文件命名

 

主要的 master.css

模块 module.css

基本共用 base.css

布局、版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

转载地址:http://rqhsx.baihongyu.com/

你可能感兴趣的文章
Eclipse中修改代码格式
查看>>
关于 error: LINK1123: failure during conversion to COFF: file invalid or corrupt 错误的解决方案...
查看>>
Linux 进程中 Stop, Park, Freeze【转】
查看>>
PHP盛宴——经常使用函数集锦
查看>>
安装gulp及相关插件
查看>>
如何在Linux用chmod来修改所有子目录中的文件属性?
查看>>
Hyper-V 2016 系列教程30 机房温度远程监控方案
查看>>
笔记:认识.NET平台
查看>>
cocos2d中CCAnimation的使用(cocos2d 1.0以上版本)
查看>>
gitlab 完整部署实例
查看>>
SCCM 2016 配置管理系列(Part8)
查看>>
我的友情链接
查看>>
PHP 程序员的技术成长规划
查看>>
python基础教程_学习笔记19:标准库:一些最爱——集合、堆和双端队列
查看>>
js replace,正则截取字符串内容
查看>>
javascript继承方式详解
查看>>
lnmp环境搭建
查看>>
自定义session扫描器精确控制session销毁时间--学习笔记
查看>>
视频直播点播nginx-rtmp开发手册中文版
查看>>
PHP队列的实现
查看>>