当前位置: 首页 > 知识库问答 >
问题:

前端 - 写网站时怎么命名class?

李博达
2023-08-06

写网站时怎么命名class?

共有2个答案

咸利
2023-08-06

贴一个 AlloyTeam 提供的常用场景的中英对照命名吧。

  • 关于团队合作的 css 命名规范 | AlloyTeam
龚宏壮
2023-08-06

目前可以简单概况为两种观点:

样式类应该与功能或结构相结合

这个是相对传统的最佳实践,比如导航栏对应的样式类可以叫 .nav,轮播或大图可以叫 .banner

也可以根据嵌套结构命名,比如大名鼎鼎的 BEM(Block Element Modifier) 命名规范

它通过将命名分为块(Block)、元素(Element)和修饰符(Modifier)三个部分,以一种清晰的方式表示元素之间的关系和层次结构
缺点 优点
选择器冗长 结构清晰
复用难度大 作用域分离(不容易产生样式冲突)
可读性强(便于团队协作开发)

样式类应该脱离结构

这种观点认为,越是把样式与功能结合、细分越难以和复用,应该把样式 原子化,其中最出名的代表当属 tailwind

但是缺点也很明显,就是它导致大量样式融合在 html 中,虽说类名可以复用,比起行内样式还是相对优胜,但如果页面结构复杂,维护起来可太痛苦了

关于这点我在之前的回答中也有提到:
学习tailwind.css的必要性?

中庸之道:取两家之长

这两种思想都很优秀,但也都有自己的缺点,所以我们应该客观的对待,取其精华去其糟粕

它们并不是对立的,比如 bootstrap 就很好地做到了这点,它既有 原子 样式,又不会特别影响整体结构,它提炼的原子样式除了一些 全局 css 样式,多数是一个 完整的独立组件,比如一个按钮、一个分页、一个导航栏,它不会 “绑架” 其他样式

而这也是现代 css 框架的主流,Ant DesignElement UISemantic UI也都提供了自己封装好的组件(当然,前端模块化的流行也是一部分原因)

 类似资料:
  • 网站在发展的过程中,很可能多次的修改域名。那么在PHPCMS V9中我们要怎么进行设置呢? 请进行以下步骤的修改: 1.修改/caches/configs/system.php里面所有和域名有关的,把以前的老域名修改为新域名就可以了。 2.进行后台设置-》站点管理 对相应的站点的域名进行修改。 3.更新系统缓存。点击后台右上角的“更新缓存”按钮。 4.进入内容-》附件管理-》附件地址替换。把附件地

  • 使用指南 - 账户管理 - 站点管理 - 网站有多个域名怎么创建站点 如果您的网站同时有多个域名可以访问,这里假设为A.com与B.com,解决方案如下: 将其中的A.com作为主域名,以此域名建立站点。 将获取的代码安装在两个域名中的所有网页上。 通过设置跨域跟踪,可以将多个域名网站的访问数据统计到一个账户的站点下,在此站点中查看多个域名的汇总数据。 如果您还希望查看单独域名下的访问数据,可以在

  • vue2中路由怎么301到新的网站 我有个关于(about)页面,我是写在vue路由里的,当我点击关于按钮时直接跳的vue路由里的about,我现在要把about页面放到了别的项目下,想实现当我点击关于按钮时,跳转另一个项目的about,如果我直接访问另一个项目/about,这样是能跳转,但会造成用户收藏的连接报错问题,和出现seo问题 我想到了在nginx里做301 但是nginx和vuerou

  • 采集目标URL链接:/xinlizixun/list4-5.html 怎么采集分页下文章内容,比如我只输入分页链接,就把当前页面分页下的内容文章都逐个采集?

  • 宽度不定,间距相同,左对齐。

  • sshpass ssh直接登录服务器是可以的。 但是改成ssh端口转发就不行了。 我的命令如下 我打印了日志