基于网易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命名规范整理的更多相关文章

  1. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  2. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  3. css命名规范: BEM 的命名法

    整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...

  4. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  5. CSS 命名规范及标题供参考与学习

    一.CSS 命名规范   XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元 ...

  6. Html+CSS命名规范:

     Html+CSS命名规范: 1.样式命名: 2.样式文件命名:

  7. 我自己总结的C#开发命名规范整理了一份

    我自己总结的C#开发命名规范整理了一份 标签: 开发规范文档标准语言 2014-06-27 22:58 3165人阅读 评论(1) 收藏 举报  分类: C#(39)  版权声明:本文为博主原创文章, ...

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

    CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer ...

  9. 通用CSS命名规范

    一.文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...

随机推荐

  1. Mongodb安全防护

    1.Mongodb未授权访问 描述 MongoDB 是一个基于分布式文件存储的数据库.默认情况下启动服务存在未授权访问风险,用户可以远程访问数据库,无需认证连接数据库并对数据库进行任意操作,存在严重的 ...

  2. shell脚本 安全删除MySQL大表

    一.简介 源码地址 日期:2018/4/12 介绍:工具用于安全删除MySQL表,对于一些特定场景可能有用 应用场景:大批删除不走索引但是有主键的场景[可以是单列索引,也可是多列索引] 实现思路:根据 ...

  3. 【二进制】CTF-Wiki PWN里面的一些练习题(Basic-ROP篇)

    sniperoj-pwn100-shellcode-x86-64 23 字节 shellcode "\x31\xf6\x48\xbb\x2f\x62\x69\x6e\x2f\x2f\x73\ ...

  4. 使用Azure Functions & .NET Core快速构建Serverless应用

    Code Repo: https://github.com/Asinta/ServerlessApp_NetconfChina2020 Prerequisites Visual Studio Code ...

  5. Django中的常用字段类型与参数

    Django中的常用字段类型 1. 数值型 以下都是数值相关的,比如AutoField,它在MySQL中的类型为int(11),而BooleanField在MySQL中对应的类型是tinyint(1) ...

  6. Excel数据导出功能

    HTML代码: <a id="aExportData" hidden><span>Export</span></a> <div ...

  7. 使用xlsx实现Excel导入

    需求 实现在系统里批量导入数据,通过上传一个excel文件,前端将文件处理为json数据发送给后端.(最好与后端定义好上传的文件模板,方便处理数据) 实现 使用xlsx: xlsx的github地址: ...

  8. 惊!世界上竟然有O(N)时间复杂度的排序算法!计数排序!

    啥?你以为排序算法的时间复杂度最快也只能O(N*log(N))了? O(N)时间复杂度的排序算法听说过没有?计数排序!!它是世界上最快最简单的算法!!! 计数排序算法操作起来只有三步,看完秒懂! 根据 ...

  9. 【LeetCode】299. Bulls and Cows 解题报告(Python)

    [LeetCode]299. Bulls and Cows 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题 ...

  10. 【LeetCode】841. Keys and Rooms 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS BFS 日期 题目地址:https://le ...