Ask DN: Any tools for listing and previewing styles?

over 7 years ago from , design at vaam

Designers! I'm on the lookout for a tool that can help me list and preview all styles used on a website. I found this extension after some googling and it almost does the trick. Any other suggestions?


  • Florens Verschelde, over 7 years ago

    You won’t find it because CSS doesn’t work like that. It’s a “do whatever you want” language, and the visual style you’re seeing for, say, a heading, may come from the tag name, from a single class, from a combination of 10 classes or more complex selectors.

    The styles for a website may have been developed with a special convention in mind, so that they use tag selectors or class names carefully, and some of those tag names and class names can be pulled inside a visual style guide. But an automated tool you throw at an unknown website would have no way to know that, and which precise convention is used, and whether it’s used all the time or the developers diverged from it.

    A final complication would be that some styles can only work if they are applied to the correct markup, and will depend on a group of nested elements to work well (a UI module or component).

    A tool like Snatchr will work partly on some sites and fail utterly on others. I don’t think you can do better without some kind of complex AI.

    For the record there are a lot of tools for making a visual, CSS-based style guide for a site, but the way they work is that the developers and designers implementing the site use this style guide tool to build components, and then use these components directly in the site’s templates. So the basic HTML structure and JS, and the whole CSS code, are shared between the live style guide and the actual site. This has to be done from the start and maintained all the way through the project’s life.

    1 point
  • Dominik SchmidtDominik Schmidt, over 7 years ago

    it's possible to parse the css styles, but what exactly do you want to be displayed?

    0 points
    • tony w, over 7 years ago

      How does this parsing work? I want to capture and display all the styles that is being used and have the output be more of a visual overview, basically-- headings, paragraph, links, lists, colors etc.

      0 points