8 ms·

Csscss: a CSS redundancy analyzer that analyzes redundancy

299 points by zmoazeni 13y ago

moonboots 13y ago
CSSO [1] is a tool that removes duplicate declarations during minification instead of just warning about them. It also performs more advanced structural optimizations. [1] http://bem.info/tools/csso/ http://bem.info/tools/csso/
- zmoazeni 13y ago
  css-ratiocinator [1] is also another tool someone mentioned to me after I launched cssscss. [1] https://github.com/begriffs/css-ratiocinator https://github.com/begriffs/css-ratiocinator and http://www.csstrashman.com/ http://www.csstrashman.com/
  - susi22 13y ago
    And rework [1] allows you to change url()'s, inline images, change vendor prefixes and more... [1] https://github.com/visionmedia/rework https://github.com/visionmedia/rework
    - k__ 13y ago
      Is there something that can do all of this and remove the unused css after clicking through the site with a browser?
- ecaron 13y ago
  I think the purpose of this package is more about making existing source code easier to maintain (applying DRY principals to CSS) than about browser-oriented optimization (thus purpose of CSSO.)
  - eru 13y ago
    You could keep the csscss'ed source in version control (easy to maintain), and use csso as an automated step before deploying.
tlrobinson 13y ago
I love the name and tag line.
- deleted 13y ago
  [deleted]
nemrow 13y ago
I bookmarked this for sure! I'm the WORST at having tons of duplicate declarations!
zmoazeni 13y ago
If you're a ruby developer I strongly encourage you to check out the source code and parsing in general. This is heavily using parslet [1] to build a css parser [2]. I'm sure there are edge cases I have missed, but still the LOC for this codebase is relatively small and fairly readable. Stay away from the RedundancyAnalyzer though. There be dragons. [1] http://kschiess.github.io/parslet/ http://kschiess.github.io/parslet/ [2] https://github.com/zmoazeni/csscss/tree/ae2f22f4416bca35f903970c15aa1685a8d237cd/lib/csscss/parser https://github.com/zmoazeni/csscss/tree/ae2f22f4416bca35f903...
laumars 13y ago
It's rare that I feel any particular emotion towards project names, but the name and description behind this one is inspired.
- jtheory 13y ago
  Except that by using redundancy in the name and description, they give the impression that their redundancy-removal skills are lacking. Maybe the project should be named "cs"? :)
- jQueryIsAwesome 13y ago
  The author also haves one of the best bios in twitter: > I connect stuff and copy bits. Sometimes it doesn't work
alex_doom 13y ago
Brilliant, I was just searching for a tool for this.
sergiotapia 13y ago
From the makers of the phenomenal Chosen jquery plugin. http://harvesthq.github.io/chosen/ http://harvesthq.github.io/chosen/ Hopefully this is indicative of the quality of this library! I'll definitely try it out this morning.
- hackerboos 13y ago
  I prefer Select2 over Chosen http://ivaynberg.github.io/select2/ http://ivaynberg.github.io/select2/
  - Semaphor 13y ago
    Why? I haven't used either yet so it'd be interesting to hear your reasoning.
    - hackerboos 13y ago
      IE7 support, better AJAX support and a ton more options.
      - publicfig 13y ago
        Also, Chosen only works with the <option> tags, which can be quite annoying. And to me, the Select2 community seems a lot more active and able to participate in the project.
  - joeblau 13y ago
    I'm using Select2 on my site http://gitignore.io/ http://gitignore.io/ and it's been awesome so far.
    - rkuykendall-com 13y ago
      Just a side note, it took me a few tries to hit "OSX." My first two tries were "OS X" and "Mac OS X", before I noticed something was coming up and disappearing when I typed the "OS X"
mattyod 13y ago
Should have run an analyser against the sub heading for that article.
- arvidkahl 13y ago
  Your post was successfully analyzed as redundant.
- skeletonjelly 13y ago
  #mcbain.mcbain:after { content: ' That's the joke.' }
deleted 13y ago
[deleted]
Snowda 13y ago
This. This makes me smile. For the name, tagline and the application.
geuis 13y ago
This could be an interesting companion to Helium. Helium-css can be used on live sites to find unused CSS. Combine with this project to remove duplicates too. https://github.com/geuis/helium-css https://github.com/geuis/helium-css
- kevinconroy 13y ago
  This may be the single most helpful comment I've found on Hacker News. I've been looking for a tool like Helium for a while. Thank you!
- ajtaylor 13y ago
  I'll echo the sibling commenter. We're in the process of rolling out a new site layout at $work and I suspect there is a LOT of leftover CSS rules which I can get rid of. Thanks very much for the link!
pindi 13y ago
It seems like when run on SCSS mode, it expands mixins before running the redundancy check. For instance, two of my selectors both include three of the same mixins, which end up expanding into 23 rules, and CSSCSS reports 25 shared rules between them. (Further inspection confirms that exactly 2 normal rules are shared.) I would think that using mixins should also count as having eliminated redundancy. A simple solution would be to ignore them, or more ideally the redundancy check could treat mixins just as a normal rule, so that it could detect using the same set of mixins in multiple places as redundancy.
- zmoazeni 13y ago
  This has come up a couple times. I wouldn't mind this topic moving it to github so the conversation doesn't get lost. And others can contribute to it long after this gets buried on HN. My initial opinion is that even though your SCSS code is consolidated, the resulting CSS code is still duplicated all over the place. To me, that is a code smell. Particularly when I need to debug from the web developer tools.
  - pindi 13y ago
    Good idea, posted my reply: https://github.com/zmoazeni/csscss/issues/25 https://github.com/zmoazeni/csscss/issues/25
harlanlewis 13y ago
Great! But, one issue. It appears to not support @import of Compass extensions: "File to import not found or unreadable."
tylerhowarth 13y ago
Any support for scss/sass planned?
- Jgrubb 13y ago
  Not only planned, but implemented and noted in the readme!
antimora 13y ago
Here is something I came across at PyCon. This technique uses genetic algorithm to minimize the CSS. The author claims 10% improvement over the standard CSS minimizer. Links: - https://us.pycon.org/2013/schedule/presentation/178/ https://us.pycon.org/2013/schedule/presentation/178/ - https://github.com/ryansb/genetic-css https://github.com/ryansb/genetic-css
fungi 13y ago
We really need this, our css has grown in to a monster over the years. This may also be of interest: Dust-Me Selectors is a firefox extension that scans HTML pages to find unused CSS selectors. http://www.brothercake.com/dustmeselectors/ http://www.brothercake.com/dustmeselectors/
michaelwww 13y ago
Noob question: how do I know the selectors and inheritance rules are applied in the same way as the target platform?
notdonspaulding 13y ago
I'm upvoting this is for the cleverly redundant title that repeats itself and causes me to vote it up.
laurencei 13y ago
Personally I used Chrome dev tools - and it has a feature called 'CSS Selector Profiles' under the 'profile' tab. You can 'record' yourself using a website - and Chrome records how many 'hits' each css rule gets. This is better than Dust-me, and all the other CSS rule detectors - because it allows you to use your site in a 'dynamic' way - and test for all the edge CSS cases (like resizing your browser to small, or enabling an error message etc). After using my SaaS for an hour - I found hundreds of rules that just never got used. Also - it tells you how many times a rule got used. So I found a few number of rules that literally only got used once, and I could often re-write them into 1-2 bigger rules - further reducing my CSS overhead.
- GhotiFish 13y ago
  That sounded really cool. So I opened up chrome, navigated to YouTube, opened the dev-tools, turned on CSS Selector Profiles, and chrome immediately crashed. :( awwwww.

299 points by zmoazeni 13y ago

CSSO [1] is a tool that removes duplicate declarations during minification instead of just warning about them. It also performs more advanced structural optimizations. [1] http://bem.info/tools/csso/ http://bem.info/tools/csso/

zmoazeni 13y ago
css-ratiocinator [1] is also another tool someone mentioned to me after I launched cssscss. [1] https://github.com/begriffs/css-ratiocinator https://github.com/begriffs/css-ratiocinator and http://www.csstrashman.com/ http://www.csstrashman.com/
- susi22 13y ago
  And rework [1] allows you to change url()'s, inline images, change vendor prefixes and more... [1] https://github.com/visionmedia/rework https://github.com/visionmedia/rework
  - k__ 13y ago
    Is there something that can do all of this and remove the unused css after clicking through the site with a browser?
ecaron 13y ago
I think the purpose of this package is more about making existing source code easier to maintain (applying DRY principals to CSS) than about browser-oriented optimization (thus purpose of CSSO.)
- eru 13y ago
  You could keep the csscss'ed source in version control (easy to maintain), and use csso as an automated step before deploying.

tlrobinson 13y ago

I love the name and tag line.

deleted 13y ago
[deleted]

nemrow 13y ago

I bookmarked this for sure! I'm the WORST at having tons of duplicate declarations!

zmoazeni 13y ago

If you're a ruby developer I strongly encourage you to check out the source code and parsing in general. This is heavily using parslet [1] to build a css parser [2]. I'm sure there are edge cases I have missed, but still the LOC for this codebase is relatively small and fairly readable. Stay away from the RedundancyAnalyzer though. There be dragons. [1] http://kschiess.github.io/parslet/ http://kschiess.github.io/parslet/ [2] https://github.com/zmoazeni/csscss/tree/ae2f22f4416bca35f903970c15aa1685a8d237cd/lib/csscss/parser https://github.com/zmoazeni/csscss/tree/ae2f22f4416bca35f903...

laumars 13y ago

It's rare that I feel any particular emotion towards project names, but the name and description behind this one is inspired.

jtheory 13y ago
Except that by using redundancy in the name and description, they give the impression that their redundancy-removal skills are lacking. Maybe the project should be named "cs"? :)
jQueryIsAwesome 13y ago
The author also haves one of the best bios in twitter: > I connect stuff and copy bits. Sometimes it doesn't work

alex_doom 13y ago

Brilliant, I was just searching for a tool for this.

sergiotapia 13y ago

From the makers of the phenomenal Chosen jquery plugin. http://harvesthq.github.io/chosen/ http://harvesthq.github.io/chosen/ Hopefully this is indicative of the quality of this library! I'll definitely try it out this morning.

hackerboos 13y ago
I prefer Select2 over Chosen http://ivaynberg.github.io/select2/ http://ivaynberg.github.io/select2/
- Semaphor 13y ago
  Why? I haven't used either yet so it'd be interesting to hear your reasoning.
  - hackerboos 13y ago
    IE7 support, better AJAX support and a ton more options.
    - publicfig 13y ago
      Also, Chosen only works with the <option> tags, which can be quite annoying. And to me, the Select2 community seems a lot more active and able to participate in the project.
- joeblau 13y ago
  I'm using Select2 on my site http://gitignore.io/ http://gitignore.io/ and it's been awesome so far.
  - rkuykendall-com 13y ago
    Just a side note, it took me a few tries to hit "OSX." My first two tries were "OS X" and "Mac OS X", before I noticed something was coming up and disappearing when I typed the "OS X"

mattyod 13y ago

Should have run an analyser against the sub heading for that article.

arvidkahl 13y ago
Your post was successfully analyzed as redundant.
skeletonjelly 13y ago
#mcbain.mcbain:after { content: ' That's the joke.' }

deleted 13y ago

[deleted]

Snowda 13y ago

This. This makes me smile. For the name, tagline and the application.

geuis 13y ago

This could be an interesting companion to Helium. Helium-css can be used on live sites to find unused CSS. Combine with this project to remove duplicates too. https://github.com/geuis/helium-css https://github.com/geuis/helium-css

kevinconroy 13y ago
This may be the single most helpful comment I've found on Hacker News. I've been looking for a tool like Helium for a while. Thank you!
ajtaylor 13y ago
I'll echo the sibling commenter. We're in the process of rolling out a new site layout at $work and I suspect there is a LOT of leftover CSS rules which I can get rid of. Thanks very much for the link!

pindi 13y ago

It seems like when run on SCSS mode, it expands mixins before running the redundancy check. For instance, two of my selectors both include three of the same mixins, which end up expanding into 23 rules, and CSSCSS reports 25 shared rules between them. (Further inspection confirms that exactly 2 normal rules are shared.) I would think that using mixins should also count as having eliminated redundancy. A simple solution would be to ignore them, or more ideally the redundancy check could treat mixins just as a normal rule, so that it could detect using the same set of mixins in multiple places as redundancy.

zmoazeni 13y ago
This has come up a couple times. I wouldn't mind this topic moving it to github so the conversation doesn't get lost. And others can contribute to it long after this gets buried on HN. My initial opinion is that even though your SCSS code is consolidated, the resulting CSS code is still duplicated all over the place. To me, that is a code smell. Particularly when I need to debug from the web developer tools.
- pindi 13y ago
  Good idea, posted my reply: https://github.com/zmoazeni/csscss/issues/25 https://github.com/zmoazeni/csscss/issues/25

harlanlewis 13y ago

Great! But, one issue. It appears to not support @import of Compass extensions: "File to import not found or unreadable."

tylerhowarth 13y ago

Any support for scss/sass planned?

Jgrubb 13y ago
Not only planned, but implemented and noted in the readme!

antimora 13y ago

Here is something I came across at PyCon. This technique uses genetic algorithm to minimize the CSS. The author claims 10% improvement over the standard CSS minimizer. Links: - https://us.pycon.org/2013/schedule/presentation/178/ https://us.pycon.org/2013/schedule/presentation/178/ - https://github.com/ryansb/genetic-css https://github.com/ryansb/genetic-css

fungi 13y ago

We really need this, our css has grown in to a monster over the years. This may also be of interest: Dust-Me Selectors is a firefox extension that scans HTML pages to find unused CSS selectors. http://www.brothercake.com/dustmeselectors/ http://www.brothercake.com/dustmeselectors/

michaelwww 13y ago

Noob question: how do I know the selectors and inheritance rules are applied in the same way as the target platform?

notdonspaulding 13y ago

I'm upvoting this is for the cleverly redundant title that repeats itself and causes me to vote it up.

laurencei 13y ago

Personally I used Chrome dev tools - and it has a feature called 'CSS Selector Profiles' under the 'profile' tab. You can 'record' yourself using a website - and Chrome records how many 'hits' each css rule gets. This is better than Dust-me, and all the other CSS rule detectors - because it allows you to use your site in a 'dynamic' way - and test for all the edge CSS cases (like resizing your browser to small, or enabling an error message etc). After using my SaaS for an hour - I found hundreds of rules that just never got used. Also - it tells you how many times a rule got used. So I found a few number of rules that literally only got used once, and I could often re-write them into 1-2 bigger rules - further reducing my CSS overhead.

GhotiFish 13y ago
That sounded really cool. So I opened up chrome, navigated to YouTube, opened the dev-tools, turned on CSS Selector Profiles, and chrome immediately crashed. :( awwwww.