CSS命名规范整理
基于网易NEC修改后,整理的命名规范
单行写完一个选择器定义
便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别。去除多余空格,使代码紧凑减少换行。
如果有嵌套定义,可以采取内部单行的形式。
分类的命名方法:使用单个字母+"-"为前缀
布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。
相同语义的不同类命名
方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。
模块和元件的扩展类的命名方法
当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。
方法:+“-”+数字或字母(如:.m-list的扩展类为.m-list-1、.m-list-2等)。
补充:基类自身可以独立使用(如:class="m-list"即可),扩展类必须基于基类使用(如:class="m-list m-list-2")。
选择器等级
1吨 = 行内样式style。
100斤 = ID选择器。
1斤 = 类、伪类和属性选择器。
1克 = 类型选择器和伪元素选择器。
统一语义理解和命名
语义 命名
文档 doc
头部 head
主体 body
尾部 footer
主栏 main
主栏子容器 main-in
侧栏 aside
侧栏子容器 aside-in
盒容器 wrap/box
布局(.g-) |
|
语义 |
命名 |
文档 |
doc |
头部 |
head |
主体 |
body |
尾部 |
footer |
主栏 |
main |
主栏子容器 |
main-in |
侧栏 |
aside |
侧栏子容器 |
aside-in |
盒容器 |
wrap/box |
模块(.m-)、元件(.u-) |
|
语义 |
命名 |
导航 |
nav |
子导航 |
subnav |
面包屑 |
crumb |
菜单 |
menu |
选项卡 |
tab |
标题区 |
head/title |
内容区 |
body/content |
列表 |
list |
表格 |
table |
表单 |
form |
热点 |
hot |
排行 |
top |
登录 |
login |
标志 |
logo |
广告 |
advertise |
搜索 |
search |
幻灯 |
slide |
提示 |
tips |
帮助 |
help |
新闻 |
news |
下载 |
download |
注册 |
regist |
投票 |
vote |
版权 |
copyright |
结果 |
result |
标题 |
title |
按钮 |
button |
输入 |
input |
CSS命名规范整理的更多相关文章
- CSS命名规范
DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- css命名规范: BEM 的命名法
整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...
- html,css命名规范 (转)
HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...
- CSS 命名规范及标题供参考与学习
一.CSS 命名规范 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元 ...
- Html+CSS命名规范:
Html+CSS命名规范: 1.样式命名: 2.样式文件命名:
- 我自己总结的C#开发命名规范整理了一份
我自己总结的C#开发命名规范整理了一份 标签: 开发规范文档标准语言 2014-06-27 22:58 3165人阅读 评论(1) 收藏 举报 分类: C#(39) 版权声明:本文为博主原创文章, ...
- CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- 通用CSS命名规范
一.文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...
随机推荐
- Mongodb安全防护
1.Mongodb未授权访问 描述 MongoDB 是一个基于分布式文件存储的数据库.默认情况下启动服务存在未授权访问风险,用户可以远程访问数据库,无需认证连接数据库并对数据库进行任意操作,存在严重的 ...
- shell脚本 安全删除MySQL大表
一.简介 源码地址 日期:2018/4/12 介绍:工具用于安全删除MySQL表,对于一些特定场景可能有用 应用场景:大批删除不走索引但是有主键的场景[可以是单列索引,也可是多列索引] 实现思路:根据 ...
- 【二进制】CTF-Wiki PWN里面的一些练习题(Basic-ROP篇)
sniperoj-pwn100-shellcode-x86-64 23 字节 shellcode "\x31\xf6\x48\xbb\x2f\x62\x69\x6e\x2f\x2f\x73\ ...
- 使用Azure Functions & .NET Core快速构建Serverless应用
Code Repo: https://github.com/Asinta/ServerlessApp_NetconfChina2020 Prerequisites Visual Studio Code ...
- Django中的常用字段类型与参数
Django中的常用字段类型 1. 数值型 以下都是数值相关的,比如AutoField,它在MySQL中的类型为int(11),而BooleanField在MySQL中对应的类型是tinyint(1) ...
- Excel数据导出功能
HTML代码: <a id="aExportData" hidden><span>Export</span></a> <div ...
- 使用xlsx实现Excel导入
需求 实现在系统里批量导入数据,通过上传一个excel文件,前端将文件处理为json数据发送给后端.(最好与后端定义好上传的文件模板,方便处理数据) 实现 使用xlsx: xlsx的github地址: ...
- 惊!世界上竟然有O(N)时间复杂度的排序算法!计数排序!
啥?你以为排序算法的时间复杂度最快也只能O(N*log(N))了? O(N)时间复杂度的排序算法听说过没有?计数排序!!它是世界上最快最简单的算法!!! 计数排序算法操作起来只有三步,看完秒懂! 根据 ...
- 【LeetCode】299. Bulls and Cows 解题报告(Python)
[LeetCode]299. Bulls and Cows 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题 ...
- 【LeetCode】841. Keys and Rooms 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS BFS 日期 题目地址:https://le ...