Hacker News Reader

Comment by greggturkington | Hacker News Reader

I keep a long list of these I can contribute. The authors need to take more advantage of fuzzy attribute matching. Really go after those patterns you see frequently from Mailchimp and other major newsletter vendors first!

    [class*="mc_embed_signup"]
    [id*="mc_embed_signup"]
    [class*="FreeNewsletter" i]
    [class*="inline-newsletter"]
    [class*="newsletter-article"]
    [class*="newsletter-form"]
    [class*="newsletter-signup"]
    [class*="newsletter-tout"]
    [class*="newsletter-widget"]
    [class*="NewsletterCard" i]
    [class*="NewsletterSignup" i]
    [class*="newssignup"]
    [id*="SignupForm" i]
    [id*="signupWrapper" i]

CSS isn't so simple anymore though, with CSS-in-JS we're moving away from deterministic class name. We can still target other attributes with CSS though, which I don't see used in these lists nearly enough, for example data attributes:

    [data-title*="Mailchimp"]

View on HN

Maybe I've simply not seen it but it seems odd that there isn't a minification/obfuscation tool that can alter the CSS names to be impenetrable to users.

The challenge would be to figure a way for an organisation, or at least set of pages, to keep self consistent obfuscated CSS (after all you'd probably want the cached content to work without having each one to have its own CSS, which wouldn't work if the obfuscation was done independently by each developer). Something happening at the Prod web server level would be ideally placed though.

You've not seen Instagram?

Doing this will make website hits tank, significantly (unless there's lock-in). Then anyone looking at the stats will ask for the change to be reverted.

It appears that using webpack or similar to generate truncated hashes as class names is somewhat common: https://develoger.com/how-to-obfuscate-css-class-names-with-...

Webpack has a parameter called localIdentName where you specify the pattern.

There are multiple such systems. Whatever Google's CSS/JS minifier tool is called does just this.

I spent a few years heavily re-styling Google+, when it was active. The CSS entity names (classes most especially, IDs not so much) were just random-alphabetic gibberish, which, worse, changed between site iterations. The large-scale abandonment of major changes to the site was a net positive for my case, as my rules no longer needed changing & updating.

I had many hundreds of site-specific CSS edits (most only a few lines) to deal with annoyances. G+ was the largest of those (100s+ lines). As a positive, I learned CSS reasonably well in the process.

These days I make heavier use of a few stock "annoyances" styles (headers, nesletters, social media, etc.), and only customise a site if it fails to be addressed by one of those.

Also Firefox / Fennec Fox's "Reader Mode" is usually (though not always) pretty useful.

Thank you for these.

Reply on news.ycombinator.com