css不要用下划线命名

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS是网页设计中最重要的一种语言,它为网页带来了美观、清晰的视觉效果。但是在使用CSS的过程中,我们需要注意一个细节问题,那就是不要使用下划线命名。/* 不好的命名: */ #header_cont

CSS是网页设计中最重要的一种语言,它为网页带来了美观、清晰的视觉效果。但是在使用CSS的过程中,我们需要注意一个细节问题,那就是不要使用下划线命名。

/* 不好的命名: */
#header_container {
  /* ... */
}

/* 好的命名: */
#header-container {
  /* ... */
} 

下划线命名的问题在于它会和HTML标签的class属性产生混淆。以前,人们习惯把class属性用下划线来分隔单词,比如<div class="header_container">,这样可以区分出各个单词。但是在CSS中,我们使用“-”符号来连接单词,比如#header-container。因此如果使用下划线命名,就会和HTML中的class属性混淆,给代码阅读和维护带来不便。

除此之外,下划线命名还会让代码产生歧义,给开发者造成困惑。比如下面这段代码:

/* 不好的命名: */
.nav_item_active {
  /* ... */
}

/* 好的命名: */
.nav-item.active {
  /* ... */
} 

在这段代码中,.nav_item_active的命名方式可能会被误认为是一个标签名,而不是class名。而如果使用.nav-item.active这种命名方式,可以清晰地表达出要选择的是一个带有class="nav-item active"的元素。

总的来说,虽然下划线命名在过去使用的较多,但在现在的网页设计中已经不再推荐使用。相反,使用连字符“-”来连接单词,可以让代码更加整洁清晰,并能避免和HTML标签混淆,提高代码的可读性和可维护性。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css不要用下划线命名

粉丝

0

关注

0

收藏

0

已有0次打赏