CSS样式文件和class类名命名规范参考

简介: CSS样式文件和class类名命名规范参考

大部分前端程序员都有命名强迫症,要花很长时间来想这个本来不是问题的问题。下面总结了样式文件命名和模块class类别命名。请记得收藏!

以下命名中如果有多个单词,遵循的是驼峰命名法。

一.CSS文件命名规范
文件分类 名称
全局样式 global.css
重置样式 reset.css
布局、版面 layout.css
字体样式 font.css
按钮样式 button.css
主要的 master.css
专栏 columns.css
主题 themes.css
模块 module.css
基本共用 base.css/common.css
二.页面结构
模块 名称 模块 名称
内容/容 器: content/container 页 头 header
页面主体 main 模块头 hd
页 尾 footer 栏目 column
模块 mod 左右中 left right center
模块内容容器 md 页面外围控制整体布局宽度 wrapper/layout
三.导航
模块 名称 模块 名称
导航 nav 子导航 subnav
顶导航 topnav 边栏 sidebar
左导航 leftsidebar 右导航 rightsidebar
菜单 menu 子菜单 submenu
摘要 summary 目录 toc
四.功能 (个人有个人的书写规范,不做强制要求)
模块 名称 模块 名称
标志 logo 广告 banner
登陆 login 登录条 loginbar
注册 regsiter 搜索 search
功能区 scope 栏目标题 title
加入 join 状态 status
按钮 btn 滚动 scroll
标签页 tab 列表 list
提示信息 msg 当前的 current /cur
小技巧 tips 图标 icon
注释 note 指南 guild
服务 service 热点 hot
新闻 news 下载 download
投票 vote 合作伙伴 partner
友情链接 friendlink 版权 copyright
活动元素 active 未活动元素 normal


相关文章
|
2月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
19天前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
1天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
14天前
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
14天前
|
前端开发
Foundation CSS 参考手册2
本文介绍了如何使用CSS类实现文本对齐,包括基本的左、右、居中和两端对齐,以及针对不同屏幕尺寸的特定对齐方式,如小屏、中屏、大屏等,每个类别都有相应的示例供测试。
|
1月前
|
前端开发 JavaScript UED
|
14天前
|
前端开发
Foundation CSS 参考手册1
Foundation CSS参考手册:Foundation框架默认使用浏览器字体大小(通常16px),移动设备为12px,字体为"Helvetica Neue",行高1.5。段落底部外边距1.25rem,行高1.6。对h1至h6标题、链接、副标题、引用、加粗、斜体、缩写、键盘输入、水平线、代码片段及列表等HTML元素设置了独立样式,优化了网页显示效果。
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
221 1
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
63 2
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。