前端开发中CSS常用的样式命名

最新推荐文章于 2024-06-26 15:47:19 发布

请叫我二狗哥

最新推荐文章于 2024-06-26 15:47:19 发布

阅读量480

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS与html 文章标签： CSS 样式命名 class命名规范 id命名规范

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.youkuaiyun.com/weimob258616/article/details/88960285

CSS与html 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了CSS开发过程中常用的样式命名规范，包括页面结构、导航及功能等元素的命名建议，如header、mainnav、banner等，有助于提升代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS开发过程中class和id命名需要遵循一定的规则，令其具有可读性，提高阅读效率，一般采用驼峰命名法。

CSS常用的样式命名：

（1）页面结构

页头：header

页面主体：main

页尾：footer

内容：content/container

容器：container

导航：nav

侧栏：sidebar

栏目：column

页面外围控制：wrapper

左右中：left right center

（2）导航

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

有导航：rightsidebar

菜单：menu

子菜单:submenu

标题：titile

摘要：summary

(3)功能

标志：logo

广告：banner

登录条：loginbar

搜索：search

功能区：shop

标题：titile

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

请叫我二狗哥

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端开发中需要注意的CSS命名规则以及书写顺序

清颖的博客

01-12

3411

CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。 `BEM`的意思就是`B模块(block)`、`E元素(element)`、`M修饰符(modifier)`，即：`[block]__[element]--[modifier]`。关于CSS属性的书写顺序建议：一般来说，要先定义好布局，即先写位置、再写大小边距，再写文字样式、背景色，最后写其他属性。

前端常用css命名规范

12-10

在前端开发中，CSS命名规范是提升代码可读性、可维护性和团队协作效率的关键因素。以下是关于前端CSS命名规范的详细说明：首先，我们理解为何需要制定CSS命名规范。在多人协作的项目中，统一的命名规范可以降低...

1 条评论您还未登录，请先登录后发表或查看评论

通用css命名规范

01-18

通用css命名规范，规范ID以及类的通用CSS名称，使你的网页看起来更专业

web前端基础：CSS样式命名

qq_37014633的博客

11-14

319

CSS样式命名规则 • 采用英文字母、数字以及“-”和“”命名 • 以小写字母开头，不能以数字和“-”、“”开头 • 命名形式：单字，连字符，下划线和驼峰 •使用有意义命名常用的CSS样式命名 1）页面结构页头：header 页面主体：main 页尾：footer 内容：content/container 容器: container 导航：nav 侧栏：sidebar 栏目：column 页面...

css命名规则

weixin_34384557的博客

12-10

108

头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：dow...

样式最常用的命名规则

weixin_30247307的博客

05-07

104

前端开发命名规则很重要，但是网上的命名规则一大篇，下面是我总结的一些常用的短语，希望能帮到大家，肯定不全，欢迎大家补充。 1.如果是模块，可以这样前缀：弹出：pop 公共：global（缩写：gb）标题：title,tit 提示：hint 菜单：menu 信息：info ...

CSS常用命名方式

weixin_43665686的博客

06-28

854

css常用命名方式

WEB前端开发规范文档CSS命名规范中文最新版本

11-23

本文档将详细介绍WEB前端开发中CSS命名的相关规范，旨在为前端开发人员提供一个标准化的操作指南。首先，基本准则强调的是符合web标准，这是确保网页能够在各种浏览器中正常显示的基础。语义化HTML意味着标签的...

WEB前端开发规范文档+CSS命名规范.docx

05-05

### WEB前端开发规范文档+CSS命名规范 #### 规范目的为了提升团队协作效率、便于后台人员添加功能以及前端后期优化维护，本规范旨在输出高质量的文档。一旦该规范文档被确认，前端开发人员必须按照本文档所规定的...

前端开发HTML与CSS基础教程：网页结构与样式设计详解及应用

最新发布

04-21

CSS部分则讲解了样式规则、选择器、颜色定义、单位、盒模型、响应式设计和Flexbox布局等。文档还提供了关于集成开发环境（IDE）和Chrome开发者工具的简要介绍。; 适合人群：对Web开发感兴趣的初学者或有一定编程基础...

css 常用样式命名规则

diantingpi1639的博客

01-18

207

大家在写css的时候，对一些html标签起一个合适的名字是个很头疼的事情，现在给大家分享项目中常用的名字供参考。外套：wrap ——用于最外层头部：header ——用于头部主要内容：main ——用于主体内容左侧：main_left ——左侧布局右侧：main_right ——右侧布局导航条：nav ——菜单内容：content ——中部主体 ...

css样式命名

weixin_43453916的博客

11-05

452

页头：header 导航：nav 页面主体：main 侧栏sidebar 页尾：footer 侧栏：column 内容：content/container 页面外围：wrapper 容器：container ...

html通用样式命名,css如何命名？

weixin_34218582的博客

06-18

342

我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。一、网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率。所有的命名最好都小写属性的值一定要用双引号("")括起来，且一定要有值如class="divcss",id="divcss"每个标签都要有开始和结束，且要有正确...

css 样式常用命名

dreamupyan的博客

04-09

193

通用的css如何命名,CSS里面的通用命名是哪些？

weixin_36382999的博客

08-03

283

1。样式命名外　套：　　wrap主导航：　　mainnav子导航：　　subnav页　脚：　　footer整个页面：　content页　眉：　　header页　脚：　　footer商　标：　　label标　题：　　title主导航：　　mainbav(globalnav)顶导航：　　topnav边导航：　　sidebar左导航：　　leftsidebar右导航：　　rightsidebar旗　志：...

经常用到 css 样式总结

qq_34703156的博客

07-13

398

1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文本溢出显示省略号 p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflo...

写CSS规范化命名的重要性及三种通用命名规则

~缘份天空~

05-14

642

们在52CSS.com以前的文章中，曾经多次提到CSS命名的问题，有些朋友依然不够重视这些问题。认为这个问题对于CSS网页布局开发是无关紧要的。自己写的样式，自己心中有数就可以了。想要修改样式可以根据自己的记忆或个人的编码习惯很快的找到样式定义在文件中的位置。下面是我们以前介绍的关于CSS命名的文章：　　◎ 参考：div+css命名规范 http://www.52css.com/article.a

css常用样式命名

优快云_lyy93的博客

06-26

260

banner，广告，推荐，热门，最新，猜你喜欢，横幅，巨幕，轮播图，海报。

css选择的样式（三）：常用的css样式命名

橙子的博客

05-01

218

常用的CSS样式命名 1）页面结构页头：header 页面主体：main页尾：footer 内容：content/container 容器: container 导航：nav侧栏：sidebar栏目：column 页面外围控制：wrapper左右中：left right center 2）导航导航：nav 主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar 左导航：leftsidebar右导航：rightsidebar菜单：menu 子菜单：s...