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


相关文章
|
8天前
|
前端开发 JavaScript
vue 动态改变css样式
vue 动态改变css样式
15 0
|
11天前
|
前端开发 开发者 UED
css样式
【4月更文挑战第20天】css样式
19 8
|
12天前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
11 0
|
9天前
|
编解码 前端开发 开发者
CSS样式
【4月更文挑战第22天】CSS样式
13 3
|
20小时前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
21小时前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
22小时前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
22小时前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 入门:给网页添加样式
【4月更文挑战第30天】CSS是网页设计的关键,用于控制网页样式和布局。它通过选择器(如元素、类和ID)来设定颜色、字体、对齐、背景等属性。CSS可内嵌、外部引用或行内设置。布局技巧包括浮动、定位和弹性盒子。响应式设计利用媒体查询适应不同设备。不断实践和学习CSS,能提升网页的吸引力和用户体验。一起探索CSS的魅力吧!
|
1天前
|
前端开发 JavaScript 安全
【亮剑】如何在 React TypeScript 中将 CSS 样式作为道具传递?
【4月更文挑战第30天】本文探讨了在React TypeScript应用中如何通过道具(props)传递CSS样式,以实现模块化、主题化和动态样式。文章分为三部分:首先解释了样式传递的必要性,包括模块化、主题化和动态样式以及TypeScript集成。接着介绍了内联样式的基本用法和最佳实践,展示了一个使用内联样式自定义按钮颜色的例子。最后,讨论了使用CSS模块和TypeScript接口处理复杂样式的方案,强调了它们在组织和重用样式方面的优势。结合TypeScript,确保了样式的正确性和可维护性,为开发者提供了灵活的样式管理策略。
|
1天前
|
前端开发
CSS样式引用方式的区别
CSS样式引用方式的区别