CSS命名及规范是第一步:

总起:所有名字小写,样式名用-号连接,如.nav-left,CSS使用小写加连接,那么ID就使用大写不加连接,比如UserName,把它和编程的属性对应起来,那么方法就以小写开头,驼峰命名,这样样式,属性,方法就一目了然。

1.尽量使用标准命名,如符录,标准名分Class名和ID名,DOM的ID在JS里就是全局变量,所以应该综合考虑使用ID的场合,应该结合编程。

2.-符的前后,应该保持一致风格,比如前面父范围,后面是子范围,最后是位置,如nav-item-left,那就都保持这样的结构。

3.另外,ID的样式,明确指定了和具体功能相关,是很难复用的,全局样式是可以复用的,单页样式主要是本页布局等。要考虑复用及层次结构。

书写顺序:

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

附:

常用的css命名规则:

  • 头:header
  • 内容:content/container
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

注释的写法:

/* Footer */

内容区

/* End Footer */

id的命名:

(1)页面结构

  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center

(2)导航

  • 导航:nav
  • 主导航:mainbav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

(3)功能

  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的: current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright

class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

  • .red { color: red; }
  • .f60 { color: #f60; }
  • .ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如

  • .font12px { font-size: 12px; }
  • .font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

  • .left { float:left; }
  • .bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

  • .barnews { }
  • .barproduct { }

注意事项::

  1. 一律小写;
  2. 尽量用英文;
  3. 不加中杠和下划线;
  4. 尽量不缩写,除非一看就明白的单词.
  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局,版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

CSS基本知识0-命名规范的更多相关文章

  1. 常用html、CSS、javascript前端命名规范

    无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

  2. html、css、js的命名规范

    最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...

  3. 刚发现 CSS 还存在一个命名规范 B.E.M

    Block !误区:这个block并非inline-block里的block,而是将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个ico ...

  4. 这些 CSS 命名规范将省下你大把调试时间

    我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...

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

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

  6. DIV+CSS命名规范-转载2

    一.CSS文件及样式命名1.CSS文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.c ...

  7. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  8. 通用CSS命名规范

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

  9. CSS命名规范参考及书写注意事项

    CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...

随机推荐

  1. RTP、RTCP协议学习-2015.04.15

    最近做视频编解码部分,传输采用RTP协议.对学习做个记录 1.简介 实时传输协议(Real-time Transport Protocol或简写RTP)是一个网络传输协议,它是由IETF的多媒体传输工 ...

  2. c# bass入门学习

    据说bass挺好用的,所以又搞了个音乐播放器 这是参考了别人的bass教学结合自己的理解写的bass操作类 public class BassHelper { private static BassH ...

  3. 深入理解JVM—JVM内存模型

    我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存,用户缓冲用户IO等待导致CPU的等 ...

  4. 【JAVA小结】类的属性组的使用

    public class UsingAttribute { static String strA = "string-a"; static String strB; static ...

  5. Sqlserver2008 数据库镜像会话的初始连接

    sqlserver2008 数据库镜像服务配置完成后,大家会发现我们有了两个数据库服务,这两个服务可以实现自动故障转移,那么我们的程序如何实现自动连接正常的数据库呢? 这个问题很简单,使用ADO.NE ...

  6. 详细说说 Google Test Certified 的各级——Level 2,3

    转载请联系作者,谢谢!   No releases with red tests基于Level1搭建的持续集成,持续发布选用的CL(changelist)就可以取自CI系统最后跑通的CL,因为持续集成 ...

  7. BC#86 1003NanoApe Loves Sequence Ⅱ[two-pointer]

    NanoApe Loves Sequence Ⅱ  Accepts: 374  Submissions: 946  Time Limit: 4000/2000 MS (Java/Others)  Me ...

  8. Hibernate批量处理数据、HQL连接查询

    一.批量处理操作 批量处理数据是指在一个事务场景中处理大量数据.在应用程序中难以避免进行批量操作,Hibernate提供了以下方式进行批量处理数据: (1)使用HQL进行批量操作     数据库层面 ...

  9. vs2015产品密钥

    HM6NR-QXX7C-DFW2Y-8B82K-WTYJV 博主验证有效

  10. [No000017]单词拼写记不住?试试这俩方法-单词拼写,怎么记又快又好?