/    Sign up×
Community /Pin to ProfileBookmark

Tracking down CSS

Copy linkTweet thisAlerts:
Jul 15.2019

I’m primarily a middle and backend developer, but I have to work on the front end quite a bit as well. One thing that’s always been difficult for me is CSS. Sometimes I have a fair amount of difficulty finding where a specific rule is applied. We’re also moving from regular CSS to SASS, which I’m amped over, as I’ve wanted to get into pre-processors for awhile. Here’s the gig – my project has gone from moderate to robust in a short time, and there was a TON of scope creep during its development. So there’s a lot of CSS that doesn’t do anything, and I want to remove all the rules I can find that aren’t being used. I use Chrome’s developer tools for most of this, but as I said, sometimes finding where a rule is actually applied causes me headaches. If anyone knows of a utility or method to ease this a bit, please share.

to post a comment
CSSHTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@tracknutJul 15.2019 — That's a bit of a holy grail, as it's impossible to get a perfect report that would show you each css rule and where it's used. But something that did a 90% job would be nice to have, and I hope someone comes back to show us that tool :)

SASS is going to make this job harder for you, since the site will be using pre-processed CSS, and you'd probably like that report to show you the SASS lines.
Copy linkTweet thisAlerts:
@LouisSayersJul 17.2019 — Yup, that's going to pretty much be mission impossible.

Not sure there's anything that's going to really help much with that except -> delete, see what's broken, OK, now you know what that style affects.

You'll just have to make sure you do it in small iterations and be thorough when checking for what's broken.

Remember to look out for media queries where the styles might only apply at certain screen sizes etc as well.

Good luck!
×

Success!

Help @Willish spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...