文档章节

CSS书写规范

tbaby
 tbaby
发布于 2014/06/26 16:04
字数 1092
阅读 77
收藏 5
点赞 0
评论 0
CSS

CSS书写规范

写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。

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缩写属性

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

去掉小数点前的“0”

简写命名

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

16进制颜色代码缩写

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

连字符CSS选择器命名规范

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

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

  • 输入的时候少按一个shift键;

  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

  • 能良好区分JavaScript变量命名(JS变量命名是用“_”)

这里有一篇破折号与下划线的详细讨论,英文:点击查看 中文篇:点击查看

不要随意使用id

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

为选择器添加状态前缀

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

 

 

CSS命名规范(规则)常用的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
指南:guide
服务: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
主导航: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

注意事项::

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


© 著作权归作者所有

共有 人打赏支持
tbaby

tbaby

粉丝 23
博文 32
码字总数 14718
作品 7
深圳
网页/平面设计
推荐大家使用的CSS书写规范、顺序

写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的...

green001
2013/12/12
0
0
Web前端团队开发规范文档

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感...

乐派电影
2014/04/11
172
0
css书写规范

介绍css的书很多文章也很多,但是很少有提及css的书写规范,一个好的规范,不但可以指导我们的思路还具备良好的语意。 书写顺序 位置属性(position,display, float, top, right, z-index等)...

小昭归来
2016/10/18
5
0
【Web规范】前端开发规范细则(更新中...)

参考列表: 教你怎样对word文档进行排版(表要笑话我,排版是基础中的基础,不然乱七八糟的文档让别人乍看哦) W3C标准 关于团队合作的css命名规范 Web前端开发规范文档 Web前端开发规范手册...

呢喃的猫咪
2014/02/18
0
0
如何规范书写 CSS

CSS书写顺序 1.位置属性 (position, top, right, z-index, display, float等)   2.大小 (width, height, padding, margin)   3.文字系列 (font, line-height, letter-spacing, color- t......

Flyes
2017/12/07
0
0
常用html、CSS、javascript前端命名规范

无意发现自己文件夹里面有这么一个文件,具体从哪里来的不记得了,仔细看下,发现总结的挺好的,贴出来分享一下。 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文...

Rella蕾拉
2012/03/13
0
0
Web 前端开发规范文档

规范目的: 使开发流程更加规范化。 通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格)。 CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”...

呵呵闯
2016/07/19
11
1
让CSS书写更漂亮!

css书写顺序: 1.位置属性(position, top, right, z-index, display, float等)   2.大小(width, height, padding, margin)   3.文字系列(font, line-height, letter-spacing, color- te......

小陈同学
2014/03/22
1K
1
浏览器前缀处理工具--Autoprefixer

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的。 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS...

叶秀兰
2014/03/05
2K
0
CSS 基础知识

CSS基础 1. CSS简述 CSS(Cascading Style Sheets) 中文全称为层叠样式表 。他是一种样式表语言用来描述HTML或者是XML文档中的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如...

熊蛋子17
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python3.6用的外库遇到的问题

要用到wmi库 pip install wmi 装后不能用还要安装pywin32库。 要用到crypto加密模块安装pip instal pycrypto装后不能用。要安装pycryptodome。...

oisan_
11分钟前
0
0
select, poll, epoll I/O复用介绍

什么是I/O复用? 内核监视多个文件描述符(I/O文件句柄),一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知应用程序进行相应的读写操作。 I/O多路复用又被称为“事件驱动”(比如读写事...

xiaoxlm
11分钟前
0
0
【Spring 系列 给IOC容器添加组件的几种方式总结】

给Spring 注册Bean的几种方式总结。其中使用@Import注解是Spring Boot 完成自动配置的一个核心注解。 1、Spring 中给IOC容器添加组件的几种方式 在Spring的配置文件中,配置Bean(基于XML方式...

HansonReal
12分钟前
3
0
bootstrapTable语言包设置

###方法一引入不同的语言包 <script src="bootstrap-table-zh-CN.js"></script> ###方法二引入全语言包 <script src="bootstrap-table-locale-all.min.js"></script>//然后在初始化前设计默......

momo1987
13分钟前
0
0
Saltstack 常用命令

1、拷贝文件到客户端 # salt 'slaver.test.com' cp.get_file salt://apache.sls /tmp/cp.txt 2、拷贝目录到客户端 # salt 'slaver.test.com' cp.get_dir salt://test /tmp 3、显示存活的客户......

硅谷课堂
14分钟前
0
0
致初学者-如何学好Python这门编程语言?[图]

致初学者-如何学好Python这门编程语言?[图]: 对于很多Python3初学者,往往会面临以下问题:Python2和Python3我该学习哪一个?是否要安装Linux系统学习Python?Python3有各种版本我该安装哪...

原创小博客
16分钟前
1
0
E31---setopt=protected_multilib=false

今天在云服务器上装nginx,需要先安装一些依赖库比如zlib, ,但是安装zlib时候报错。 yum install -y zlib zlib-devel 1 (-y 指的是如果需要选yes no的自动y)下面是报错 Protected multil...

侠客行之石头
20分钟前
0
0
HTTP常见面试题

Http与Https的区别: HTTP 的URL 以http:// 开头,而HTTPS 的URL 以https:// 开头 HTTP 是不安全的,而 HTTPS 是安全的 HTTP 标准端口是80 ,而 HTTPS 的标准端口是443 在OSI 网络模型中,H...

JK_OPERA
22分钟前
0
0
python爬取站长素材网页图片保存到ppt中

网站地址:http://sc.chinaz.com/tupian/index.html 直接上代码: import requestsfrom bs4 import BeautifulSoupfrom pptx import Presentationfrom pptx.util import Inchesimpor......

你为什么不吃药
24分钟前
1
0
Ubuntu 18.04 swap空间的修改

一、准备工作 执行“sudo swapon -s”命令,查看是否已经存在swap file 二、修改swap file # 如果第一步存在swapfile则需要先禁用sudo swapoff /swapfile# 修改swap 空间的大小为2Gs...

Iceberg_XTY
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部