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


相关文章
|
15天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
4天前
|
前端开发 JavaScript UED
|
21天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
110 1
|
30天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
40 2
|
9天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
9天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
2月前
|
前端开发
如何处理 <style scoped> 中 CSS 类名的冲突问题?
如何处理 <style scoped> 中 CSS 类名的冲突问题?
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
80 1
|
2月前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。