前端开发必备：CSS 命名规范与常用知识点大全
在前端开发中，规范的命名与熟练掌握核心技术点是提升开发效率、降低维护成本的关键。本文整合了 CSS 命名规范、常用样式属性、DOM 操作、框架语法等核心知识点，涵盖布局、功能、文件命名及前端高频用法，助力开发者打造规范、高效、易维护的项目。
一、CSS 命名规范：让代码更易读易维护
规范的命名是团队协作的基础，以下命名遵循“语义化”原则，见名知意，覆盖页面结构、功能区块、产品相关等场景。
（一）页面结构命名
| 命名 | 作用 |
|---|
| wrap | 外套、包裹，用于最外层容器 |
| wrapper | 页面外围容器，控制整体布局宽度 |
| box | 通用容器、盒子 |
| header | 页头区域（如网站顶部导航栏上方） |
| nav | 主导航区域 |
| main | 内容主体区域，页面核心部分 |
| content/container | 内容容器，用于包裹页面具体内容 |
| sidebar | 侧边栏（如右侧功能栏、左侧菜单） |
| footer | 页脚区域（如版权信息、友情链接区域） |
（二）功能区块命名
| 命名 | 作用 |
|---|
| left/center/right | 左/中/右布局区块 |
| main-left | 左侧主要布局区域 |
| main-right | 右侧主要布局区域 |
| logo | 网站 LOGO 标志容器 |
| search | 搜索输入框及搜索区域 |
| loginbar | 登录条（如顶部登录入口区域） |
| register | 注册模块容器 |
| banner | 横幅广告区域 |
| menu | 菜单容器（一级菜单） |
| submenu | 子菜单、二级菜单 |
| top | 顶部小区域（如通知栏） |
| topnav | 顶部导航 |
| mainnav | 主导航（区别于次级导航） |
| subnav | 子导航、二级导航 |
| leftsideBar | 左侧导航栏 |
| rightsideBar | 右侧导航栏 |
| topbar | 顶部工具栏（如操作按钮组） |
| bottom | 底部小区域 |
| bottombar | 底部工具栏 |
| tool | 通用工具条（如编辑工具组） |
| shop | 购物相关功能区（如购物车、收银台） |
（三）通用功能命名
| 命名 | 作用 |
|---|
| title | 栏目标题（如列表标题、模块标题） |
| summary | 摘要、概述区域 |
| hot | 热门内容、推荐模块 |
| msg | 提示信息容器（如成功/错误提示） |
| news | 新闻内容区域 |
| list | 通用列表容器（如文章列表、数据列表） |
| piclist | 图片列表容器 |
| newslist | 新闻列表容器 |
| search-output | 搜索输出结果区域 |
| search-results | 搜索结果展示区域 |
| drop/dropdown | 下拉组件容器 |
| dropmenu/dropdown-content | 下拉菜单内容区域 |
| scroll | 滚动区域（如滚动列表、滚动公告） |
| homepage | 首页专属样式/模块 |
| subpage | 子页面、二级页面专属样式 |
| tag | 标签组件（如分类标签） |
| tab | 标签页容器（如切换标签） |
| tips | 小技巧、提示说明区域 |
| ranking | 排行榜区域（如热门商品排行） |
| vote | 投票功能模块 |
| btn | 按钮通用类（如 .btn-primary 主按钮） |
| icon | 图标容器（如小图标、功能图标） |
| arr/arrow | 箭头元素（如上/下/左/右箭头） |
| status | 状态展示区域（如订单状态、审核状态） |
| note | 注释、说明文本区域 |
| skin | 皮肤切换相关样式 |
| current | 当前激活状态（如当前导航、当前标签） |
| active | 活跃状态（如hover激活、选中状态） |
| download | 下载功能模块 |
| friendLink | 友情链接区域 |
| copyright | 版权信息区域 |
| partner | 合作伙伴展示区域 |
| joinus | 加入我们模块（如招聘入口） |
| sitemap | 网站地图区域 |
| siteinfo | 网站信息展示（如公司简介） |
| siteinfoLegal | 法律声明区域 |
| announcement | 公告展示区域 |
| guild | 指南、帮助区域（如使用指南） |
| service | 服务模块（如客户服务、售后服务） |
| promotion | 推广、营销模块（如优惠活动） |
| blog | 博客相关模块 |
| forum | 论坛相关模块 |
（四）产品相关命名
| 命名 | 作用 |
|---|
| keyword | 关键词输入/展示区域 |
| products | 产品列表/产品区域 |
| products-prices | 产品价格展示区域 |
| products-description | 产品描述区域 |
| products-review | 产品评论区域 |
| editor-review | 编辑推荐/编辑评论区域 |
| news-products | 最新产品展示区域 |
| publisher | 生产商、发布方信息区域 |
| screenshot | 产品截图、缩略图区域 |
| faqs | 常见问题解答区域 |
| branding | 商标、品牌展示区域 |
| pay | 支付、充值模块（如充值入口、支付页面） |
| reputation | 信誉、评价展示区域（如商家信誉、用户评分） |
（五）CSS 文件命名规范
| 文件名 | 作用 |
|---|
| global.css | 全局样式（如全局变量、通用样式） |
| layout.css | 布局样式（如页面框架、栅格系统） |
| base.css | 基础共用样式（如重置样式、默认样式） |
| style.css | 综合样式（小型项目主样式文件） |
| master.css | 主要样式文件（核心样式入口） |
| module.css | 模块样式（如独立组件、功能模块样式） |
| forms.css | 表单样式（如输入框、按钮、下拉框样式） |
| themes.css | 主题/换肤样式（如深色模式、自定义皮肤） |
| font.css | 字体样式（如自定义字体、字体大小、字体间距） |
| print.css | 打印样式（页面打印时的专属样式） |
| mend.css | 补丁样式（临时修复、兼容样式） |
（六）CSS 类名命名技巧
- 颜色类：直接使用颜色名称或16进制代码，如
.red（红色）、.f60（#f60）、.ff8600（#ff8600）； - 字体大小类：采用“font+尺寸”命名，如
.font12px（字体12px）、.font9pt（字体9pt）； - 对齐样式类：使用对齐目标英文名称，如
.left（左对齐）、.center（居中对齐）、.right（右对齐）； - 功能类：采用“类别+功能”命名，如
.bar-news（新闻栏目标题）、.btn-submit（提交按钮）。
二、CSS 核心样式属性：常用属性与用法
（一）布局与盒模型
| 属性 | 作用 | 常用值 |
|---|
| width/height | 元素宽/高 | 固定值（px）、百分比（%）、auto |
| margin | 外边距 | margin-top/right/bottom/left，缩写 margin: 上 右 下 左 |
| padding | 内边距 | padding-top/right/bottom/left，缩写 padding: 上 右 下 左 |
| float | 浮动布局 | left（左浮动）、right（右浮动）、none（不浮动） |
| clear | 清除浮动 | left（清左浮动）、right（清右浮动）、both（清所有浮动） |
| display | 元素显示模式 | block（块级）、inline（行内）、inline-block（行内块）、none（隐藏） |
| position | 定位方式 | relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、static（默认） |
| left/top/right/bottom | 定位偏移量 | 固定值（px）、百分比（%） |
| z-index | 层级优先级 | 数字（越大层级越高，默认0） |
| overflow | 溢出处理 | hidden（溢出隐藏）、auto（自动滚动）、scroll（强制滚动） |
| box-sizing | 盒模型计算方式 | content-box（默认，宽高不含padding/border）、border-box（宽高含padding/border） |
（二）字体与文本
| 属性 | 作用 | 常用值 |
|---|
| font-family | 字体类型 | ‘微软雅黑’、‘楷体’、Arial、sans-serif |
| font-size | 字体大小 | 12px、16pt、1.2rem |
| font-weight | 字体粗细 | normal（正常）、bold（加粗）、100-900（数字值） |
| font-style | 字体样式 | normal（正常）、italic（斜体） |
| color | 文本颜色 | 颜色名、16进制、rgb/rgba |
| text-align | 文本水平对齐 | left、center、right、justify（两端对齐） |
| line-height | 行高 | 固定值（px）、倍数（如1.5）、与height相等实现垂直居中 |
| text-decoration | 文本修饰 | none（无）、underline（下划线）、line-through（中划线）、overline（上划线） |
| text-indent | 首行缩进 | 2em（缩进2字符）、固定值（px） |
| letter-spacing | 字母间距 | 2px（字符间间距） |
| word-spacing | 单词间距 | 5px（单词间间距） |
| white-space | 空白处理 | nowrap（强制不换行）、normal（默认）、pre（保留空格换行） |
| text-overflow | 文本溢出 | ellipsis（省略号，需配合 white-space:nowrap 和 overflow:hidden） |
（三）背景与边框
| 属性 | 作用 | 常用值 |
|---|
| background | 背景综合属性 | 顺序：背景图 url()、重复方式、定位、颜色，如 background: url() no-repeat center #fff |
| background-color | 背景颜色 | 颜色名、16进制、rgb/rgba |
| background-image | 背景图片 | url(‘图片路径’) |
| background-repeat | 背景平铺 | no-repeat（不平铺）、repeat-x（水平平铺）、repeat-y（垂直平铺） |
| background-position | 背景定位 | 关键词（center、left top）、固定值（px）、百分比（%） |
| background-size | 背景尺寸 | cover（覆盖容器）、contain（适应容器）、固定值（宽 高） |
| border | 边框综合属性 | 宽度、样式、颜色，如 border: 1px solid #ccc |
| border-radius | 圆角 | 5px（统一圆角）、10px 20px（左上右下/右上左下）、50%（圆形） |
| box-shadow | 盒子阴影 | x偏移 y偏移 模糊度 阴影颜色，如 box-shadow: 2px 2px 5px rgba(0,0,0,0.3) |
（四）特殊效果与兼容
| 属性 | 作用 | 常用值/用法 |
|---|
| opacity | 透明度 | 0-1（1不透明，0完全透明），兼容IE需配合 filter: alpha(opacity=50)（50=50%） |
| cursor | 鼠标样式 | pointer（手型）、default（默认）、move（移动指针） |
| visibility | 元素可见性 | visible（可见）、hidden（隐藏，保留占位） |
| background-clip | 背景裁剪 | content-box（内容区裁剪）、border-box（边框区裁剪）、text（文本裁剪，需加 -webkit- 前缀） |
| background-origin | 背景原点 | padding-box（padding开始）、border-box（边框开始）、content-box（内容区开始） |
| -webkit-filter | 滤镜效果 | blur(5px)（模糊）、grayscale(100%)（灰度） |
| transition | 过渡动画 | 过渡属性 时长 速度曲线，如 transition: all 0.3s ease |
| animation | 关键帧动画 | 时长 动画名 速度曲线 循环次数，如 animation: 3s fadeIn linear infinite |
| @keyframes | 定义关键帧 | 如 @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } |
（五）CSS 优先级与兼容
- 优先级：!important（最高）> 内联样式 > ID选择器 > 类选择器/伪类/属性选择器 > 元素选择器 > 通配符选择器；
- CSS Hack：IE6专属前缀
_（如 _color: #f00），webkit内核前缀 -webkit-（如 -webkit-border-radius），火狐前缀 -moz-，IE前缀 -ms-。
三、前端高频知识点：DOM、事件、存储与框架
（一）DOM 操作
1. 元素获取
document.getElementById('id')：通过ID获取单个元素；document.getElementsByClassName('class')：通过类名获取元素集合；document.getElementsByTagName('tag')：通过标签名获取元素集合；document.querySelector('selector')：通过选择器获取单个元素（如 document.querySelector('.btn')）；document.querySelectorAll('selector')：通过选择器获取元素集合。
2. 节点关系
- 父节点：
obj.parentNode / obj.parentElement； - 子节点：
obj.children（仅元素节点）、obj.childNodes（含文本/注释节点）； - 同级节点：
obj.nextElementSibling（下一个同级元素）、obj.previousElementSibling（上一个同级元素）； - 首尾节点：
obj.firstElementChild（首个子元素）、obj.lastElementChild（最后一个子元素）。
3. 元素操作
- 创建元素：
document.createElement('tagName')（如 document.createElement('div')）； - 添加元素：
parent.appendChild(child)（尾部添加）、parent.insertBefore(newChild, referenceChild)（指定位置添加）； - 删除元素：
parent.removeChild(child)； - 克隆元素：
obj.cloneNode(true)（true深克隆，复制子节点）； - 属性操作：
obj.getAttribute('attr')（获取属性）、obj.setAttribute('attr', 'value')（设置属性）、obj.removeAttribute('attr')（删除属性）。
（二）事件处理
1. 常用事件
- 鼠标事件：
onclick（点击）、onmouseover（移入）、onmouseout（移出）、onmousedown（按下）、onmouseup（抬起）、onmousemove（移动）、ondblclick（双击）； - 键盘事件：
onkeydown（按键按下）、onkeyup（按键抬起）； - 表单事件：
onfocus（获取焦点）、onblur（失去焦点）、oninput（输入变化）、onsubmit（表单提交）、onreset（表单重置）； - 页面事件：
onload（页面加载完成）、onresize（窗口缩放）、onscroll（页面滚动）； - 其他事件：
onerror（资源加载失败）、onstorage（本地存储变化）。
2. 事件修饰符（Vue/uni-app常用）
stop：阻止事件冒泡；prevent：阻止默认事件（如表单提交、a标签跳转）；passive：被动事件（优化滚动性能，不可与prevent同时使用）；self：仅元素自身触发事件；once：事件仅触发一次。
3. 事件绑定与解绑
- 原生绑定：
obj.addEventListener('click', handler)（高级浏览器）、obj.attachEvent('onclick', handler)（IE兼容）； - 原生解绑：
obj.removeEventListener('click', handler)、obj.detachEvent('onclick', handler)； - 事件委托：利用事件冒泡，将子元素事件绑定到父元素，优化性能（如列表项点击事件）。
（三）本地存储
| 存储方式 | 特点 | 常用API |
|---|
| localStorage | 永久存储，容量约5MB，同源共享 | setItem(key, value)、getItem(key)、removeItem(key)、clear() |
| sessionStorage | 会话存储，关闭浏览器失效，容量约5MB | 同localStorage API |
| cookie | 容量小（4KB），可设置过期时间，随请求发送 | document.cookie 读写，需手动封装API |
（四）框架常用语法（Vue/uni-app）
1. 指令
- 数据绑定：
v-bind:（缩写 :）、v-model（双向绑定）、{{ 插值表达式 }}； - 条件渲染：
v-if/v-else-if/v-else、v-show； - 列表渲染：
v-for="(item, index) in list" :key="item.id"； - 事件绑定：
v-on:（缩写 @），如 @click="handleClick"； - 样式绑定：
v-bind:class（对象/数组形式）、v-bind:style； - 其他指令：
v-pre（跳过编译）、v-cloak（隐藏未编译模板）、v-once（仅渲染一次）。
2. 生命周期（uni-app）
- 页面生命周期：
onLoad（页面加载）、onShow（页面显示）、onReady（页面渲染完成）、onUnload（页面卸载）； - 组件生命周期：
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。
（五）表单相关
1. 表单元素
- 输入类：
input type="text"（文本）、type="password"（密码）、type="number"（数字）、type="tel"（电话）； - 选择类：
input type="radio"（单选）、type="checkbox"（多选）、select+option（下拉选择）、textarea（文本域）； - 按钮类：
input type="submit"（提交）、type="button"（普通按钮）、type="reset"（重置）。
2. 表单属性
placeholder：输入提示文本；required：必填项；disabled：禁用状态；maxlength：最大输入长度；readonly：只读状态；multiple：多选（如文件上传、下拉选择）。
四、开发规范与优化建议
- 命名原则：语义化优先，避免拼音、无意义字符（如
.aaa、.box123），采用小写字母+连字符（kebab-case）命名（如 .user-info），避免驼峰（camelCase）； - 样式优化：提取公共样式（如
.btn、.container），减少重复代码；使用 computed 缓存复杂样式逻辑，避免模板中写过多表达式； - 性能优化：避免频繁操作DOM，批量更新数据；减少
float 使用，优先采用Flex/Grid布局；图片懒加载、压缩，使用WebP格式； - 兼容性处理：使用
autoprefixer 自动添加浏览器前缀；针对低版本浏览器，避免使用ES6+语法和高级CSS属性； - 维护建议：样式文件按功能拆分（如布局、组件、页面专属样式），注释关键样式逻辑，便于后期迭代。
总结
本文整合了前端开发中CSS命名规范、核心样式属性、DOM操作、框架语法等高频知识点，覆盖从基础布局到高级功能的全场景需求。遵循规范的命名与开发习惯，不仅能提升团队协作效率，更能让项目具备良好的可维护性和扩展性。后续可根据实际项目场景，灵活调整命名与样式方案，结合性能优化技巧，打造高效、稳定的前端产品。
扫一扫
3570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
