css 命名规则

一个有规则的命名 会提高代码的可读性

一、命名规则说明:

1)、所有的命名最好都小写

2)、属性的值一定要用双引号("")括起来

3)、给图片加上alt标签

4)、尽量使用英文命名原则

5)、尽量不缩写,除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名:

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容(中部)

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

三、 常用的样式命名

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

#container 或 #content 容器,用于最外层

#layout 布局

#head 或 #header 页头部分

#foot 或 #footer 页脚部分

#nav 主导航

#subnav 二级导航

#menu 菜单

#submenu 子菜单

#sideBar 侧栏

#sidebar_a 或 #sidebar_b 左边栏或右边栏

#main 页面主体

#tag 标签

#msg 或 #message 提示信息

#tips 小技巧

#vote 投票

#friendlink 友情连接

#title 标题

#summary 摘要

#loginbar 登录条

#searchInput 搜索输入框

#hot 热门热点

#search 搜索

#search_output 搜索输出和搜索结果相似

#searchBar 搜索条

#search_results 搜索结果

#copyright 版权信息

#branding 商标

#logo 网站LOGO标志

#siteinfo 网站信息

#siteinfoLegal 法律声明

#siteinfoCredits 信誉

#joinus 加入我们

#partner 合作伙伴

#service 服务

#regsiter 注册

#arr 或 #arrowr 箭头

#guild 指南

#sitemap 网站地图

#list 列表

#homepage 首页

#subpage 二级页面子页面

#tool 或 #toolbar 工具条

#drop 下拉

#dorpmenu 下拉菜单

#status 状态

#scroll 滚动

.tab 标签页

.left 居左

.right 居右

.center 居中

.news 新闻

.download 下载

.banner 广告条(顶部广告条)

.products 产品

.products-prices 产品价格

.products-description 产品描述

.products-review 产品评论

.editor_review 编辑评论

.news_release 最新产品

.publisher 生产商

.screenshot 缩略图

.faqs 常见问题

.keyword 关键词

.blog 博客

.forum 论坛

相关推荐
石小石Orz33 分钟前
民间AI排行榜单新鲜出炉,Fable 5.1仅排第三
前端·后端·ai编程
FYKJ_201041 分钟前
【毕设分享】基于Web的校园兼职信息发布与申请系统07059
前端·vue.js·spring boot·mysql·typescript·spark·课程设计
志尊宝2 小时前
Vue3 零基础每日笔记(032):Suspense 与异步组件——懒加载与顶层 await 终极方案
前端·javascript·vue.js·笔记·html5
Peter-Code2 小时前
微前端避坑指南:主应用与子应用的高度及滚动条协调
css·前端框架·微前端
Alice-YUE2 小时前
前端速通 Agent:5 个项目,一条学习路径
前端·大模型·ai agent·学习路径·deerflow
是立不是利2 小时前
前端分页逻辑与边界场景实战解析
前端·javascript
小聪7083 小时前
elpis-core 动态组件扩展设计
前端
Amos_Web3 小时前
Rspack 源码解析(七):Module、Chunk 与加载树优化
前端·rust·源码阅读
OpenTiny社区3 小时前
从开发到运行:OpenTiny NEXT 如何构建 Agent 时代的 Web 应用?
前端·github·ai编程
愿得一猪蹄3 小时前
前端性能优化,Core Web Vitals 三个指标到底怎么改
前端