div+css设计中ID的命名习惯和规范

div+css设计中ID的命名习惯和规范,第1张

概述大家都知道规范的css命名可以增强样式规则的可读性,便于后来你或别人对页面的修改。起初我写css规则的时候,用汉语的缩写来命名,现在看来是很不专业的,也给我的后期维护浪费精力。 根据自己的而写法习惯和网上的一些写法,我总结了一套适用自己的id命名写法.拿出来晒一晒。 CSS 类和ID的常用命名… 大家都知道规范的CSS命名可以增强样式规则的可读性,便于后来你或别人对页面的修改。起初我写CSS规则的时候,用汉语的缩写来命名,现在看来是很不专业的,也给我的后期维护浪费精力。

根据自己的而写法习惯和网上的一些写法,我总结了一套适用自己的ID命名写法.拿出来晒一晒。

CSS 类和ID的常用命名:

网站头部: head/header(头部) top(顶部)

导航: nanv 导航具体区分:topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级导航)

旗帜、广告和商标:logo(旗帜)、brand(商标)、banner(标语)

搜索:sreach(搜索)、sreachBox(搜索框)、sreachbtn(搜索按钮)、sreachinput(搜索输入框)

注册和登录:login(登录)、regsiter(注册)、userBox(用户名/通行证的文本框)、password(密码)

布局、分栏和框: layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainBox()、subpage(子页面/二级页面)

页脚/底部:foot/footer(页脚/底部)、copyright(版权信息)、sitemap(网站地图)

其他:content(内容)、skin(皮肤)、Title(标题)、from(表单)、pic(图片)、news(新闻)、shop(购物区)、List(列表/清单)、newsList(新闻列表)、downloadList(下载列表)、picList(图片列表)、dropmenv(下拉菜单)、cor/corner(圆角)、homepage(首页)、crumb(当前位置导航)

实际上上面的ID命名我会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以.f_red {}(f是Font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。

另外我还经常使用"in"的写法做子divd的命名,写法in+父div,这样可以避免前面命名过了后面div不知道怎么去命名。比如intop、inBox、infrom、inlogin等等。

没有一个真正标准的命名规范,每个人都有自己的一套写法。但是要尽量向大家所认同的规范上靠,毕竟这在团队合作上有莫大的益处。 总结

以上是内存溢出为你收集整理的div+css设计中ID的命名习惯和规范全部内容,希望文章能够帮你解决div+css设计中ID的命名习惯和规范所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1024012.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存