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 [/ ...
随机推荐
- IT过来人的10点经验谈
1 入行要趁早,正常是22岁本科或25岁硕士毕业入行.如果是零基础经培训班加持的,尽量在28岁前入行,30岁以后再想要入行IT的,千万慎重. 2 IT行业确实能挣大钱,而且能为学历一般学校一般家庭背景 ...
- 数据挖掘实战 - 天池新人赛o2o优惠券使用预测
数据挖掘实战 - o2o优惠券使用预测 一.前言 大家好,家人们.今天是2021/12/14号.上次更新是2021/08/29.上篇文章中说到要开两个专题,果不其然我鸽了,这一鸽就是三个多月.今天,我 ...
- 千兆车载以太网TSN网络测试?TSN Box为您焕新
TSN概述 在汽车领域内,近几年车内网络通讯方式的变革诉求,期望能够有更高的数据传输速率,以及保证实时性的通讯方式引入.例如对于自动驾驶而言,传统的CAN总线已经远远不能满足其对通讯的要求,而基于以太 ...
- CF157A Game Outcome 题解
Content 有一个 \(n\times n\) 的矩阵,每个元素都有一个权值.求所有满足其所在纵列所有元素权值和大于其所在横列所有元素权值和的元素个数. 数据范围:\(1\leqslant n\l ...
- SQL优化一例:通过改变分组条件(减少计算次数)来提高效率
#与各人授权日期相关,所以有十万用户,就有十万次查询(相关子查询) @Run.ExecuteSql("更新各人应听正课数",@"update bi_data.study_ ...
- js 将二维数组转为一维数组
方法一 使用ES的最新语法:Array.prototype.flat(). flat([dept]),参数 dept 为数组的深度,默认为1,根据传入的深度将数组展开. 对于不确定深度的数组,可以传入 ...
- JAVA通过正则匹配html里面body标签的内容,去掉body标签
/** * 获取html中body的内容 包含body标签 * @param htmlStr html代码 * @return */ public static String getBody(Stri ...
- IDEA设置默认(指定)的注释作者信息
有时候我们想在IDEA里面创建的时候就默认设置一个指定的作者信息 填入作者信息 然后点击ok /** * * @author yvioo */ 然后我们新建文件的时候就会自动带上这个了,模板可以根据自 ...
- ubuntu(Linux) c++ 获取本机IPv4和ipv6、查询本机IPv4,IPv6
1.关于 演示环境: Linux xxxxxxx 5.4.0-47-generic #51-Ubuntu SMP Fri Sep 4 19:50:52 UTC 2020 x86_64 x86_64 x ...
- 【LeetCode】35. Search Insert Position 解题报告(Java & Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 二分查找 日期 题目地址:https://leetc ...