美文网首页
常见css命名

常见css命名

作者: moly琴 | 来源:发表于2018-10-26 21:01 被阅读0次

常见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
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

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
关于我们:aboutus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

4. 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 { }

5. CSS文件常用命名

首页: index.css
主要的: master.css main.css
模块: module.css
基本共用: base.css
布局,版面: layout.css
主题: themes.css
专栏: columns.css
文字: font.css
表单: forms.css
补丁: mend.css
打印: print.css

6. 命名注意事项

1)可以使用大小写字母,数字,下划线,中横线,但是不能以数字开头;
2)尽量用相应的英文;
3)长名称或词组可以使用中横线来为选择器命名,不建议使用下划线来给CSS选择器命名(1.少按一个shift键,2.浏览器兼容性问题,_top在IE6里面无效,3.和JS的命名区分开);
4)尽量不缩写,除非一看就明白的单词。

相关文章

  • 常见css命名

    常见css命名 头部:header内容:content/container尾:footer导航:nav侧栏:sid...

  • 前端基础(问答5)

    keywords:选择器、优先级、class与id、命名空间、伪类。 CSS选择器常见的有几种? 常见的CSS选择...

  • 我的前端编写规范

    css命名:模块:各种常见的网页内容模块,通常可以重复使用的较大的整体,比如导航、菜单、幻灯、图文列表等。命名前面...

  • 网页样式那些事

    常见css类的关键词 参考资料 什么鬼,又不知道怎么命名class了

  • web前端经验分享

    CSS技巧 解决css样式污染方案 命名约定 BEM命名规范 使用CSS Modules css实现新手引导效果 ...

  • 网页编写逻辑

    网页编写 网站logo 设置css reset命名rest.css文件 设置common css命名common....

  • CSS学习

    css基础 首行缩进text-indent:2em; 页面布局常见命名规范头:header内容:content/c...

  • html代码规范,chrome应用

    &html,css入门 基础学习 &代码规范 点这里 CSS命名规则 常用的CSS命名规则 头:header 内容...

  • [知识点滴]Div+CSS命名规范大全

    Div+CSS命名规范(前端web开发命名规范)Div+CSS命名规范(一)窗体头:header内容:conten...

  • css命名

    html页面的CSS、DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾...

网友评论

      本文标题:常见css命名

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