div+css命名规则
马六甲海峡
2024-04-23 22:52
我们开发div+css网页时候,比较困惑和纠结的事莫过于CSS命名,特别是新手,不知道什么地方该如何命名,怎样命名才好。但正所谓国有国法,家有家规。在div+css中也有一套约定俗成的命名规则,下面请随我们一起来看看吧!
一、网页元素及常用功能的命名规则
(1)导航方面命名规则
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题:title
摘要:summary
(2)页面结构方面命名规则
容器:container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(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
二、CSS文件命名规则
主要的master.css
模块module.css
基本共用base.css
布局,版面layout.css
主题themes.css
专栏columns.css
文字font.css
表单forms.css
补丁mend.css
打印print.css
三、命名的注意事项
了解了常用的命名规则之后,我们来谈谈命名的注意事项,具体如下:
1.所有的命名最好都小写
2.属性的值一定要用双引号("")括起来,且一定要有值如class="thinkcss",id="thinkcss"
3.每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4.空元素要有结束的tag或于开始的tag后加上"/"
5.表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6.<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7.给每一个表格和表单加上一个唯一的、结构标记id
8.给图片加上alt标签
9.尽量使用英文命名原则
10.尽量不缩写,除非一看就明白的单词
以上为div+css的命名规则总结,这套规则大致跟日常用的中英词汇吻合,所以非常容易理解。合理规范的命名在团队开发中将有助于各成员快速看懂我们的代码,同时还能方便维护。所以我们编程学习网网站建议大家尽量按照本文中所给出的规则对CSS文件和各网页元素及常用功能进行命名!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341