html语义化标签与css伪元素选择器结合使用

Question

问题描述

在写静态页面的过程中，想尽量契合HTML5语义化的标准，将下面这个页面进行的修改
(通过语义化的标签和css子选择器代替了html文件中很多class名字和密密麻麻的div，css文件的类选择器)

问题出现的环境背景及自己尝试过哪些方法

先说得到的结论吧，查了很多网上的资料。得出的结论是推荐使用类选择器(但是我不服)
理由如下:

1. 目前主流的开发方式是模块化开发(vue,react,angular等)，不会有某个文件(.vue,.jsx)html部分层级过深的问题。同理，复用的问题也可以通过模块化的开发方式(封装组件)来解决。
2. 类选择器那就得在html部分的标签中添加很多类似于class='avatar'的代码，同时css文件中也得加上.avatar{}，代码量会增加。虽然看css代码，可以知道这里描述的是一个avatar(类名体现了语义化)，但是无法确定这个avatar在html代码中的哪个位置/层级，所以我还得再去html代码中通过ctrl + f找到这个/些class='avatar'所在位置，这还不算完，我还得向它父级看，才能确定这个class='avatar'元素对应到真实页面中的哪个/些 avatar。
3. 通过css伪类选择器可以直接确定标签的位置，再通过css代码+html标签可以大概知道描述的是个什么，语义化。而且可以配合section,aside等语义化标签进一步简化html代码，避免全部是div和span等无语义化的标签。

你期待的结果是什么？实际看到的错误信息又是什么？

想问一下大家觉得应该如何处理最好？

Answer 1

我用着也是类选择器最顺手。用class虽然不知道在哪个层级，但是class如果有明确的语义，相比标签要清晰很多。

html用语义话的标签是个好习惯，对SEO，辅助视觉障碍之类的都有帮助。 但用作CSS来说，却不好

• 现在的html层级一般都很深，按照你的写法，内嵌N多层，代码并不优雅 a>b>c>d>e.....
• 可复用性几乎为0。我一个右箭头的class，可以到处用，按照层级写，几乎不可能重复用
• 和html耦合性太高了。html换个标签，css要改，换个位置，更要改动，增加个元素，也可能要改，还要挨个层级找过去，太累了。

所以我觉得 用语义话的标签加css的class 这样比较好

Answer 2

先说你的想法不靠谱。然后逐点分析：

1. 模块化开发和使用类名并不冲突，类名可读性强的多，尤其有利于别人和未来的你理解 HTML 结构。
2. 这么一点字节数对产品的影响微乎其微，随便一张图片没处理好，增加几百K，顶一个完整的项目了。何况还有 gzip。
3. 固定结构就是自寻死路啊少年……未来维护会麻烦死的。语义化本来就要遵守，但是遵守语义化和用更清晰的类名并不冲突。HTML 总共100多个标签，排除掉声明打印样式的、特殊功能的，符合语义并且表示结构的只剩十几个，想表现清晰的结构几乎不可能，必须用其它辅助手段，而类名可读性明显强于 nth-child。

顺便给几个建议：

1. 如果你觉得写 HTML 麻烦可以试试 pug
2. 写代码要从长期考虑，不要只看眼下

Answer 3

首先我也觉得类选择器好，其次语义化也要兼顾。（居然有人邀请我回答，不甚惶恐，在下斗胆，废话一篇）

html主结构，css主样式，语义化标签个人觉得就像是大纲，方便人看和机器找，组织页面大纲的时候可以尽量使用语义化标签，清晰的表达出整体结构。

关于各模块的设计还是推荐类选择器，此处不管是复用性还是语义化都是类选择器更好

• 以 Components 的角度思考，以两个单词命名（.article-card文章卡片）
• Components 中的 Elements，以一个单词命名（.article-card .field）
• Components 和 Elements 可能都会拥有 Variants，以中划线（.article-card-small
  .field-red）
• Components 可以互相嵌套

注：1、Components（组件）, Elements（元素）, Variants（变体）类似BEM的Block、Element、Modifier（修饰符）

　　2、Components 应该在不同的上下文中都可以复用，所以应避免设置以下属性：

    Positioning (position, top, left, right, bottom)
    Floats (float, clear)
    Margins (margin)
    Dimensions (width, height) 

　　3、头像和 logos 这些元素应该设置固定尺寸

　　4、倘若你需要为组件设置定位，应将在组件的上下文（父元素）中进行处理，比如以下例子中，将 widths和 floats 应用在 list component(.article-list) 当中，而不是 component(.article-card) 自身。

以上只是些大道理，关于你的问题描述，以下我大胆的针对性的猜测一番。
1、关于最佳实践的问题本就是萝卜青菜各有所爱，但是不能以主流框架去绑架语言；
2、这是熟练度问题，该找还得找
3、标签加伪类如span：nth-of-type(2)不就确定是父元素的第2个span标签，还是要找父元素不是吗？而且当你面对一堆一模一样的标签和数字，然后父级还都是section的时候，真的好吗？我感觉你是在改别人的代码，所以才不顺畅吧
说明：你说的密密麻麻的div怕是后端写的吧，本身ul/h1/span/p这些都是语义化标签，就算用类选择器，这些也都是用上的
最关键的是类名比较灵动，可以方便实现css动效，和组件变体等
最常见的就是active类实现状态切换以及animated之类，还有如下组件样式变换只需添加row类

.prodcut-list {
  padding: 0.07rem 0.07rem;
  overflow: hidden;
  width: 100%;
  .product-item {
    padding: 0.07rem;
    width: 50%;
    float: left;
    
    .product-info {
      box-shadow: 2px 3px 4px #f7f7f7;
      border-radius: 0.03rem;
      padding: 0 0 .1rem;
      
      .p-img {
        padding-top: 100%;
        background: url(//timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534855844770&di=35ecd715771d17f496bda394d0b1fb3a&imgtype=0&src=http%3A%2F%2Fimage20.it168.com%2F201403_800x800%2F1782%2Fc3af48b5d10b28a4.jpg)
          no-repeat center/cover;
      }
      .p-info {
        .title {
          display: flex;
          align-items: center;
          padding: 0.05rem;
          img {
            width: 0.36rem;
            height: 0.36rem;
            border-radius: 50%;
            margin-right: 0.08rem;
          }
        }

        .column {
          display: flex;
          align-items: center;
          justify-content: space-around;
          span {//默认统一样式
            font-size: 0.14rem;
            color: #999;
          }
          .tprice {//个别加类区分
            font-size: 0.15rem;
            color: #fa5e6a;
          }
        }
      }
    }
    &.row{//变体
        width: 100%;
        float: none;
      .product-info {
        display: flex;
      }
      .p-img {
        width: 1.14rem;
        height: 1.14rem;
        padding-top: 0;
        flex: none;
        margin-right: .1rem;
      }
    }
  }
}

另外，从性能方面来说
CSS 选择器是从右到左进行规则匹配，只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或者因为不匹配而退出。我们把最右边选择符称之为关键选择器。如果都是像a、span之类的标签的话，浏览器必须遍历页面中所有的 a 标签，并向左匹配直至父级，层级明确的情况下尽量用子代选择器代替后代选择器，子代只向上找一层父级，而后代会一直找到根元素。
我一向废话比较多，感谢看完的同学。

Answer 4

了解过BEM 吗，可以参考，个人感觉 BEM这样的组织方式不错

Answer 5

你可以使用 less sass 什么的来写, 写完编译成 css, 这样都满足你需求了

Answer 6

class 的好处是 可以类名拼接。 bootstrap 就是很好的例子。

虽然类名多点，但是可控性还是比较爽的。

标签的话 一不小心会有全局的影响。不推荐，

当项目页面100+ 的时候 你应该能感受到了

Answer 7

class是比较合适的。

然后了解一下命名规范。

• 驼峰命名
• BEM

Answer 8

可以用sass来写，写完编译成css就行了