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 论坛

相关推荐
程序员黑豆3 小时前
鸿蒙应用开发:V1与V2版本数据持久化实战教程
前端·harmonyos
小月土星7 小时前
React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端
程序员黑豆7 小时前
鸿蒙开发 Navigation 路由教程:从入门到实战
前端·harmonyos
烬羽9 小时前
React Router v7 完全指南:一个 Demo 吃透前端路由
javascript·react.js·前端框架
烬羽9 小时前
从"整个页面刷新"到"丝滑切换":手写一个 HashRouter 彻底搞懂前端路由
javascript·前端框架·全栈
用户938515635079 小时前
从零理解 React Router v6:每一个 API 都是怎么工作的
前端·javascript·全栈
用户0595401744611 小时前
Redis缓存回滚踩坑实录:一个配置失误,让我在凌晨3点丢了3000条数据
前端·css
kyriewen12 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
IT_陈寒12 小时前
Redis缓存击穿把我坑惨了,原来这样设过期时间才靠谱
前端·人工智能·后端
用户9385156350713 小时前
从"坐电梯"到"前端路由"——深入理解 Hash 路由原理
前端·typescript·全栈