V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
inktiger
V2EX  ›  程序员

现在那种前端网页页面 className 看起来是随机的是如何实现的

  •  
  •   inktiger · 2020-08-14 15:36:15 +08:00 · 3026 次点击
    这是一个创建于 1562 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是一名后端,今天在 facebook 源代码看到页面的 className 感觉全是随机取的,好像近来这种方式的网站不少,这个是如何实现的呢?这种对 seo 友好吗,这种做法有什么好处和坏处呢

    img

    13 条回复    2020-08-15 06:42:18 +08:00
    way2explore2
        1
    way2explore2  
       2020-08-14 15:40:13 +08:00   ❤️ 1
    因为他们用 react
    inktiger
        2
    inktiger  
    OP
       2020-08-14 15:43:44 +08:00
    @way2explore2 噢噢,原来是这样,感谢感谢
    ayase252
        3
    ayase252  
       2020-08-14 15:47:03 +08:00 via iPhone
    webpack 构建的时候 css-loader hash 一下
    sjhhjx0122
        4
    sjhhjx0122  
       2020-08-14 15:50:34 +08:00
    webpack 打包的时候 hash 了一下
    w3313003
        5
    w3313003  
       2020-08-14 15:54:05 +08:00
    css-module
    momocraft
        6
    momocraft  
       2020-08-14 15:55:36 +08:00
    各种 css-in-js 或者 css module
    zhuweiyou
        7
    zhuweiyou  
       2020-08-14 15:57:49 +08:00
    这不是“人工”写上去的,工具处理成这样的,是为了不同文件用重复的 class 名,不会冲突。
    hb751968840
        8
    hb751968840  
       2020-08-14 16:47:25 +08:00
    vue 的 scope 和 css in js
    P233
        9
    P233  
       2020-08-14 16:49:37 +08:00
    facebook 网站上这个还不太一样, 一个 css 属性, 对应一个 class,atomic css
    HFX3389
        10
    HFX3389  
       2020-08-14 16:58:19 +08:00   ❤️ 1
    这种网页对爬虫是不是不怎么友好~~
    tao1991123
        11
    tao1991123  
       2020-08-14 17:09:05 +08:00
    css-module
    MegrezZhu
        12
    MegrezZhu  
       2020-08-14 23:24:15 +08:00   ❤️ 1
    从目的角度来说,有的网站这么做是为了给 adblock 用户添堵…
    joeybuddy
        13
    joeybuddy  
       2020-08-15 06:42:18 +08:00
    styled-components 也是这个效果。好处就是不需要费脑子去想样式名称并且作为组件不容易有样式污染。而且在组件化开发的时候,组件名称本身表示了语义化的信息,费力给 CSS 起名字有点累赘
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   926 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:20 · PVG 05:20 · LAX 13:20 · JFK 16:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.