
Csscss: a CSS redundancy analyzer that analyzes redundancy - zmoazeni
http://zmoazeni.github.io/csscss/?hn=1
======
geuis
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>

~~~
kevinconroy
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!

------
laurencei
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
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.

------
sergiotapia
From the makers of the phenomenal Chosen jquery plugin.

<http://harvesthq.github.io/chosen/>

Hopefully this is indicative of the quality of this library! I'll definitely
try it out this morning.

~~~
hackerboos
I prefer Select2 over Chosen

<http://ivaynberg.github.io/select2/>

~~~
ineedtosleep
The problem with Select2 is that users are now _required_ to have js on to
just use a silly dropdown. Chosen actually degrades gracefully.

~~~
windsurfer
Yeah, and they lie in their first example. The "example code" is nothing like
their real demo code. If it was, you'd be able to use their select boxes if
you had JS disabled...

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

~~~
jtheory
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"? :)

------
zmoazeni
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/>

[2]
[https://github.com/zmoazeni/csscss/tree/ae2f22f4416bca35f903...](https://github.com/zmoazeni/csscss/tree/ae2f22f4416bca35f903970c15aa1685a8d237cd/lib/csscss/parser)

------
moonboots
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/>

~~~
ecaron
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
You could keep the csscss'ed source in version control (easy to maintain), and
use csso as an automated step before deploying.

------
tlrobinson
I love the name and tag line.

------
antimora
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://github.com/ryansb/genetic-css>

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

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

------
pindi
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
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
Good idea, posted my reply: <https://github.com/zmoazeni/csscss/issues/25>

------
harlanlewis
Great!

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

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

------
fungi
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/>

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

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

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

~~~
arvidkahl
Your post was successfully analyzed as redundant.

------
tylerhowarth
Any support for scss/sass planned?

~~~
Jgrubb
Not only planned, but implemented and noted in the readme!

