CSS:命名规范心得分享
一个好的命名习惯(当然这里指的并不仅仅是CSS命名)。不仅可以提高开发效率,而且有益于后期修改和维护。
假设我们当前使用的命名方式都是约定成俗的,所有人都是这样写,那么你去到一个新团队,或者别人来接手你的工作,都可以大大缩短去阅读别人代码的时间。
一个规范化的命名,不用说,只要想想就能体会到其中的好处了。
| CSS:命名规范心得分享 | ||
| 板块(Plate) | 命名(Naming) | 说明(Description) |
| 主容器 | wrapper | 页面上最大的外部容器,如无特殊需求,不推荐使用 |
| 页面头部 | header | 主体内容以上的部分,即页面头部位置,可包含logo导航等 |
| 页面底部 | footer | 主体内容以下的部分,即页面底部位置,可包含版权备案等 |
| 面包屑 | position | 页面中的面包屑导航,如当前位置 |
| 页面主体 | main | 页面中呈现最重要内容的区域 |
| 网站标志 | logo | 标志着一个网站的图片或文字 |
| 一级导航 | nav | 一级导航 |
| 二级导航 | subnav | 二级导航 |
| 一级菜单 | menu | 一级菜单 |
| 二级菜单 | submenu | 二级菜单 |
| 页面通栏 | banner | 页面上的一些大条的图片 |
| 正文主体 | content | 页面主体中呈现主要内容的区域 |
| 正文侧栏 | sidebar | 页面主体中呈现次要内容的区域 |
| 广告 | ad | |
| 标题 | tit | 页面上的标题部分,如头条标题可写为:tit-topline,连接符后面为标题部分的相关内容概述 |
| 摘要 | summary | 文章的摘要或说明 |
| 普通新闻列表 | news-list | 新闻标题列表 |
| 新闻top排行 | top-list | 有序的新闻列表 |
| 图片列表 | pic-list | 图片列表 |
| 图文混排 | pic-txt | |
| 图文混排图片区 | pic-area | |
| 图文混排文字区 | txt-area | |
| 技巧提示 | tips | 一些技巧或者提示信息 |
| 搜索 | search | 搜索区域 |
| 外补丁 | mtop/mright/mbot/mleft | 如1像素外上补丁可以写成mtop1,2像素mtop2... |
| 内补丁 | ptop/pright/pbot/pleft | 如1像素内上补丁可以写成ptop1,2像素ptop2... |
| 12px的普通文字 | f12 | 如14px可写为f14... |
| 12px的加粗文字 | fb12 | 如14px可写为fb14... |
CSS:命名规范心得分享的更多相关文章
- CSS命名规范
DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...
- html,css命名规范 (转)
HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- CSS 命名规范及标题供参考与学习
一.CSS 命名规范 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元 ...
- Html+CSS命名规范:
Html+CSS命名规范: 1.样式命名: 2.样式文件命名:
- css命名规范: BEM 的命名法
整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...
- CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- 通用CSS命名规范
一.文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...
- CSS 命名规范总结
CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...
随机推荐
- python tkiner实现自动打包程序
环境 python3.x 使用前请确保安装pyinstaller库 本程序还未完善,可以自行完善 若要使用加密,请自行安装cryptodome库 import tkinter as tk from t ...
- 2019-6-27-WPF-如何给定两个点画出一条波浪线
title author date CreateTime categories WPF 如何给定两个点画出一条波浪线 lindexi 2019-6-27 10:17:6 +0800 2019-6-26 ...
- bash之set命令
set命令是 Bash 脚本的重要环节,却常常被忽视,导致脚本的安全性和可维护性出问题.本文介绍它的基本用法,让你可以更安心地使用 Bash 脚本. 一.简介 我们知道,Bash 执行脚本的时候,会创 ...
- LUOGU P2986 [USACO10MAR]伟大的奶牛聚集Great Cow Gat…
传送门 解题思路 首先第一遍dfs预处理出每个点的子树的siz,然后可以处理出放在根节点的答案,然后递推可得其他答案,递推方程 sum[u]=sum[x]-(val[i]*siz[u])+(siz[1 ...
- 搭建nodejs代理服务器,从而解决跨域问题
先在同级处新建js文件(app.js) 使用时npm 安装 Node.js 模块语法 也就是对应的文件所在地“npm install”一下 然后安装对应需要的模块: expresspathreques ...
- SAS信用评分之逻辑回归的变量选择
SAS信用评分之逻辑回归的变量选择 关于woe的转化,这一部在之前的这篇文章:sas批量输出变量woe值中已经写了,woe也只是简单的公式转化而已,所以在这系列中就不细究了哈.这次的文章我想来讲逻辑回 ...
- Maven实战03_Maven使用入门
1:pom.xml Maven项目的核心文件,非常重要.POM(Project Object Model)项目对象模型,其定义了项目的基本信息,用于描述项目如何构建,声明项目依赖等等. 创建一个最简单 ...
- java基础之单例模式
单列模式: 单例模式指的是一个类只能有一个实例,这样的类被称为单例类,或者单态类,即Singleton Class 单例类的特点 单例类只可有一个实例 它必须自己创立这唯一的一个实例 它必须给所有其它 ...
- jquery校验是否为空
function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_p ...
- 访问hbase的内部大致流程
hbase 访问表过程.Client(客户端)----->访问ZK(拿到meta表的region位置)----->访问meta 表的region------>拿到user表的regi ...