CSS Stats

Enter a URL and get statistics for a site's CSS

3 followers

Enter a URL and get statistics for a site's CSS

3 followers

Visit website

Website analytics

Launch tags:Developer Tools•Tech

Launch Team

CloudflareStill paying to deploy your apps? Try Cloudflare Workers for free

Promoted

pganalyze

Just ran this on Product Hunt itself - quite neat tool I must say (love the specificity graph!). http://cssstats.com/stats?url=ht... Also looks like we need to consolidate some of our CSS colours...

Report

12yr ago

devlogs.gg

@lukasfittl yeah, we were planning on doing that… haha

Report

12yr ago

Enterprise Should Suck Less - #23 - Drew DeWalt

Hunter

@lukasfittl @Jonnotie how are you guys managing css? SASS? do you define sass variables for all of your colors?

Report

12yr ago

pganalyze

@mbesto Yup, SASS variables - although we're not 100% consistent with that yet (got some legacy CSS) + using darken/lighten often leads to slightly different shades of grey.

Report

12yr ago

Enterprise Should Suck Less - #23 - Drew DeWalt

Hunter

@lukasfittl cool! Have you guys looked at http://bourbon.io/ ? I'm obsessed with it right now.

Report

12yr ago

pganalyze

@mbesto Bourbon is neat! @ayrtonbe & @Jonnotie have been gradually introducing it over the last month :)

Report

12yr ago

CryptoPoops

@mrmrs_ When I used this earlier this month, it almost felt like a labor of love for the community. What's the story behind CSSstats' creation, and what do you hope its effect will be?

Report

12yr ago

CSS.GUI

Maker

@staringispolite As a designer I definitely refactor a lot of css - so I was constantly finding myself asking a lot of questions about whatever codebase I was currently working on. I had started to use some Unix stuff to automate answering them. Some were design based questions like "what colors do I have to work with? what font sizes can I use?" I'd do things like grep for a certain property and pipe it to only show me unique values. I'm not the greatest wizard with Unix though so there were a lot of questions I still couldn't get answers to easily. Which frustrated me. Then I saw a talk by Alex Sexton about hacking on Abstract Syntax Trees generated by open source preprocessors. This pretty much blew my mind at the possibilities of questions you could answer given the data structure of the AST. Automating things with Unix can be powerful - but I wasn't good enough to grep for certain patterns. Once I had an AST in json format using a node module called css-parse, I was pretty quickly able to write some hacky JavaScript to start replicating my Unix scripts... and so much more. Around this time my friend @jxnblk and I were spending a lot of time talking about all the different questions we both had about css when working within a new system - so after I showed him some of my hacky JavaScript - he helped me transition it into an actual webapp that we put out last November (2013) as we were finding the tool useful for our own dev needs and thought it might be useful for others. Over the past year Jxn has done a lot of work around automating css documentation with js on various personal projects like bass css and has pushed a lot of the ideas we originally started chatting about. Recently he took a stab at putting a new version of cssstats together with improved performance and architecture on bob the front and back ends. The original version was brittle and difficult to iterate on so we're excited to have a more flexible system moving forward. I think most companies don't know how much time and money they are unnecessarily losing to pulling apart messy css / front-end systems - and hopefully we can have more tools like cssstats that are trying to help visualize the current state and complexity of a system so teams can make informed design / dev decisions. While there are neat ways to automate css documentation - they require forethought and maintenance. I think ideally cssstats would be able to spit out a rudimentary style guide that both designers and developers can use to build or refactor interfaces more quickly.

Report

12yr ago

CryptoPoops

@jxnblk @mrmrs_ Wow, thanks for the super detailed response! At a previous company, it took them 5 years to get to a nice cohesive/interactive style guide. (And still, it was a passion project of the main front-end engineer and never actually made it onto the roadmap.) Definitely feel your pain refactoring CSS from the engineering side. Automated style guides (and warnings of deviations?) would save a lot of time and add clarity to design discussions I also find myself imagining some benchmarks for CSS complexity now, like "your site has double the font sizes of Apple.com: consider simplifying" or "55% as many X as Salesforce.com: great job!" Almost like Hubspot's "Website Grader", but from a design complexity and performance standpoint

Report

12yr ago

Gatsby

Maker

.@mrmrs_ is more of the brains behind this, but I helped him put it together. Happy to answer any questions.

Report

12yr ago

pganalyze

@mrmrs_ @jxnblk Some thoughts from testing it for PH: * Would love if I could zoom into the specificity graph (i.e. what is the line that produces it) * Color codes don't seem to be normalized, i.e. #8F8683 != #8f8683 * I want this as a weekly email report / automated test we can run (I'd pay for it!) * For media queries it would also be useful to zoom in / see how often a certain query was used Thanks for making this :)

Report

12yr ago

Gatsby

Maker

@lukasfittl Thanks! 1. We plan on adding something like a detail view for all selectors – probably a table. 2. That's a conscious decision. It can help show code style inconsistencies. See https://github.com/mrmrs/cssstat... 3. Me too :) 4. More details about media queries is definitely something we want to add.

Report

12yr ago

Enterprise Should Suck Less - #23 - Drew DeWalt

Hunter

Just ran this on a couple of my bootstrap based sites and holy bloat batman!

Report

12yr ago

CryptoPoops

Adam & Jackson are bad-asses. Will send out the bat-signal and see if they're free for an AMA

Report

12yr ago

Reviews