美文网首页
参考网易云的命名规范

参考网易云的命名规范

作者: 我车掉沟里了 | 来源:发表于2017-11-27 14:30 被阅读0次

想着最近做的微信公众号,维护起来那class,简直惨不忍睹,应该很难找到吧,今天准备花心血进行一番大改动 不知道会持续多久,哎,想想就头疼。在领导的推荐下,准备参照网易云的规范,好好对命名进行规范一下,参照的具体地址http://nec.netease.com/standard/css-sort.html;

一,大的类别区分

公共型样式(通用布局,通用组件和扩展);

特殊型样式(与整体差异性较大的时候,设置的单独样式);

皮肤型样式(这里感觉用处不大,也没那个必要再去引入一个文件);

因此我选择上述2个区分样式作为自己的css库来分类;一会还得找找最新的消除浏览器差异的样式文件o(╥﹏╥)o;

二,命名规范

在上述公共型样式中 选择以html文件名字开头大写字母(区分不同的名字差异)并使用连字符连接,在参考了他们的命名规则以后,我自己选择以以下方式命名(大小写无区别)

.si-headder-nav-div.class-xxx

采取的是定位的方式  例如在single.html和segment.html 选择定位sihtml文件,然后选择header部位然后定位到header里面 calss为nav的元素下面 继续定位到nav下面的div元素 class为xxx的元素

#常用命名规则

头: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

标签:tags

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guide

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

三,书写顺序

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等)

一会儿要开始痛苦的挣扎了,心好痛。不知道会不会

相关文章

  • 参考网易云的命名规范

    想着最近做的微信公众号,维护起来那class,简直惨不忍睹,应该很难找到吧,今天准备花心血进行一番大改动 不知道会...

  • 枚举

    ps:这只是一个示例,命名规范请参考Object-C命名规范。

  • JS命名、CSS命名参考规范

    命名对一个前端来说其实是一个非常麻烦的事情。尤其是对于我这种英语不是很好的人。合理的命名能提升很多对于代码的维护和...

  • VUE中CSS命名规范(参考BEM命名规范)

    用了elementUI后,发现css类名中“--”和“__”,不知道是什么意思?于是上网查了一下,它们的出现...

  • Android 命名规范 (提高代码可以读性)

    android文件众多,根据名称来辨别用途很重要,因此命名要规范 这篇文章可参考:Android 命名规范 (提高...

  • 前端开发命名规范

    一,通用命名规则(必须) 二、变量命名规范(参考) 三、书写规范(必须) 普通代码段应该如下: 变量定义方法如下:...

  • 编码用这16个命名规则能让你少写一半以上的注释!

    前言 之前我们讲过 Dart 的命名规范,可以参考:规范代码命名,让你的 Dart 代码阅读起来更愉悦![http...

  • C#基本命名规范

    参考各家规范及官方推荐规范 基本命名规则 C# 资源命名规范 1.内嵌资源因为【-】会导致自动转换比如导入一个图片...

  • iOS 团队编程规范

    iOS 团队编程规范 前 言 一、命名规范 二、代码注释规范 三、代码格式化规范 四、编码规范 参考资料: 转载自...

  • 网易云音乐的APP设计切图和标注设计

    网易云音乐的APP设计切图和标注设计规范。 看完这套APP设计信息图,我们可以重点的阅读网易云音乐的布局规范和标注...

网友评论

      本文标题:参考网易云的命名规范

      本文链接:https://www.haomeiwen.com/subject/pcprbxtx.html