4 ms·

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 freque

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"]

nmstoker 5y ago
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.
- pjc50 5y ago
  You've not seen Instagram?
- wizzwizz4 5y ago
  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.
- tyingq 5y ago
  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-react-and-webpack-20e2b5c49cda https://develoger.com/how-to-obfuscate-css-class-names-with-... Webpack has a parameter called localIdentName where you specify the pattern.
- dredmorbius 5y ago
  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.
k1m 5y ago
Thank you for these.

nmstoker 5y ago

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.

pjc50 5y ago
You've not seen Instagram?
wizzwizz4 5y ago
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.
tyingq 5y ago
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-react-and-webpack-20e2b5c49cda https://develoger.com/how-to-obfuscate-css-class-names-with-... Webpack has a parameter called localIdentName where you specify the pattern.
dredmorbius 5y ago
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.

k1m 5y ago

Thank you for these.