一个好的命名习惯(当然这里指的并不仅仅是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:命名规范心得分享的更多相关文章

  1. CSS命名规范

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

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

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

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

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

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

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

  5. Html+CSS命名规范:

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

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

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

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

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

  8. 通用CSS命名规范

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

  9. CSS 命名规范总结

    CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...

随机推荐

  1. appscan如何扫描移动应用APP

    1.前置条件:让手机和电脑处于同一WIFI下 1打开appscan,选择手动探索/外部设备. 2在弹出的对话框页面点击右上角“记录代理配置”. 3在弹出的页面选择记录代理页签,设置Appscan代理端 ...

  2. 1、Redis的使用

    非关系型数据库分类: 分类 典型代表 典型应用场景 数据类型 优点 缺点 键值 (key-value) Tokyo Cabinet/Tyrant, Redis, Voldemort, Oracle B ...

  3. Harvest of Apples (HDU多校第四场 B) (HDU 6333 ) 莫队 + 组合数 + 逆元

    题意大致是有n个苹果,问你最多拿走m个苹果有多少种拿法.题目非常简单,就是求C(n,0)+...+C(n,m)的组合数的和,但是询问足足有1e5个,然后n,m都是1e5的范围,直接暴力的话肯定时间炸到 ...

  4. uni-app中不使用scroll-view组件,监听页面滑直底部事件

    最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...

  5. angularjs中动态为audio绑定src问题总结

    先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...

  6. 在skyline中将井盖、雨水箅子等部件放到地面模型上

    公司三维建模组遇到这样的一个问题,怎样将井盖.雨水盖子恰好放在做好的地面模型上.传统的方法是在skyline中逐个调整井盖的对地高度,就是调整为恰好能放在地面上.或者选择很粗糙的一个方法,在“高度”属 ...

  7. [转] Linux 句柄是什么 ?

    源地址:http://www.blogjava.net/shijian/archive/2012/04/06/373463.html 1.句柄就是一个标识符,只要获得对象的句柄,我们就可以对对象进行任 ...

  8. 【MFC学习笔记】菜单和工具栏

    1 菜单栏 1.1 在对话框中加入菜单: 打开Resource View资源视图, *.rc文件—Add Resources —Menu,即可加入菜单. 注:①菜单项中含有“...”表示点击后会弹出对 ...

  9. jps的用法及常见问题介绍

    1.jps的作用 jps类似linux的ps命令,不同的是ps是用来显示进程,而jps只显示java进程,准确的说是当前用户已启动的部分java进程信息,信息包括进程号和简短的进程command. 2 ...

  10. Docker(五)安装Fastdfs

    https://blog.csdn.net/qq_37759106/article/details/82981023 有2个提示: 这篇博客nginx开放的80端口, 首先要打开防火墙80的端口: 测 ...