CSS命名规则/CSS命令规范

麦田2年前 (2020-05-16)工作笔记262

按照规范命名CSS,更专业,更易于管理!


头部:header


内容:content/container


尾部:footer


导航:nav


侧栏:sidebar


栏目:column


页面外围控制整体布局宽度:wrapper


左右中:leftrightcenter


登录条: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


id的命名

1、页面结构


容器:container


页头:header


内容:content/container


页面主体:main


页尾:footer


导航:nav


侧栏:sidebar


栏目:column


页面外围控制整体佈局宽度:wrapper


左右中:leftrightcenter


2、导航


导航:nav


主导航:mainnav


子导航:subnav


顶导航:topnav


边导航:sidebar


左导航:leftsidebar


右导航:rightsidebar


菜单:menu


子菜单:submenu


标题:title


摘要:summary


3、功能


标志:logo


广告:banner


登陆:login


登录条:loginbar


注册:register


搜索:search


功能区:shop


标题:title


加入:joinus


状态:status


按钮:btn


滚动:scroll


标籤页:tab


文章列表:list


提示信息:msg


当前的:current


小技巧:tips


图标:icon


注释:note


指南:guild


服务:service


热点:hot


新闻:news


下载:download


投票:vote


合作伙伴:partner


友情链接:link


版权:copyright


注释的写法

/*Header*/

内容区

/*EndHeader*/

注意事项

1.一律小写;


2.尽量用英文;


3.不加中横和下划线;


4.尽量不缩写,除非一看就明白的单词。


CSS样式表文件命名

主要的master.css


模块module.css


基本共用base.css


布局、版面layout.css


主题themes.css


专栏columns.css


文字font.css


表单forms.css


补丁mend.css


打印print.css

相关文章

HTML5网页视频代码和音频代码

HTML5已经成为主流,一段简单的HTML5代码就可以实现在网页上播放视频和音频。在网页播放视频的HTML5代码<video width="480" height="...

批量修改和批量替换的技巧

大约2007年,我才开始学会使用批量替换,这是一种神奇的功能!批量修改和替换的软件Dreamweaver、UltraReplace、推荐:Notepad++批量替换的技巧:1、普通的替换很简单,就不详...

网站结构经验谈

网站有大有小,结构也有所不同,麦田的经验如下:1、小型网站(页面在1000以下)麦田建议的结构是完全扁平化,所有网页文件都放在根目录中,包含:index、list、fenlei、neirong…2、中...

Linux服务器管理面板推荐

买到主机后就要开始配置网站环境,以前手工配置Linux服务器系统非常复杂,后来开始有服务器面板,只需要安装好服务器运维面板,后续的操作就变得非常简单方便!麦田使用过,并推荐如下几款主机面板:A、宝塔面...

静态博客生成器大全和简评

根据静态博客生成器排行榜网站staticgen,将主流的程序列出如下,并简评备忘:第一名:Next.js,依赖Node.js,安装简单,一次安装成功,但是使用麻烦;第二名:Jekyll,安装简单,在深...

CSS字体大小单位介绍和转换对照表

css字体大小单位,常见的有px、em、rem,这三个的区别是:px是固定的像素,设置后无法为适应页面大小而改变,但实际上这是我经常使用的字体单位大小,设置后页面显示正常,不存在在手机中字体过小的问题...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。