2

Possible Duplicate:
Refactoring large/old CSS files

Wondering if anyone knows of a product that would help you to "see" all the css styles currently defined on a page.

For example... Say I'm working on a page and want to create a "leader" css value as a class for a span to make wrap around the first few words of a paragraph to make them bold.

I could do something like...

.leader { font-weight:bold; }

and then...

<p><span class="leader">Four score and seven years ago</span> our Fathers...</p>

I may create this w/out realizing a class called "leadertext" was already defined in a stylesheet on the page. Without either having knowledge of it, or scanning through all the CSS I have I don't know of a way to know what's already set.

Curious if there's some silver bullet I don't know about.

Improve this question
2
  • My answer to the above question lists a number of tools which do what you're asking, but @Antonio is correct that firebug will quickly show you what the active styles are on a given tag.
    – toomanyairmiles
    Commented May 17, 2012 at 8:45
  • almost every major browser vendor provide out-of-the-box development tools. hit F12 while viewing the page. Chrome's is my personal favorite.
    – Eliran Malka
    Commented May 17, 2012 at 9:49

2 Answers 2

Reset to default
2

Use Firebug, look at the html tab and there you will have css rules for current markup element, here is a screenshot :

enter image description here

Improve this answer
1
  • 1
    Since I don't want to steal the thunder from Antonio (Very good answer), you could also use Bookmarklets... even though they seem to have been forgotten. Use this page for a good display of what is out there right now, a number of bookmarklets will display CSS properties (Including class/id, etc). Unrelated: The 'Edit Any Website' bookmarklet is awesome!
    – Christopher
    Commented May 17, 2012 at 10:30
1

Automatic CSS documentation tools such as KSS and css_doc will examine a stylesheet and produce documentation for it that you can use as a styleguide to avoid recreating existing styles.

KSS, for example, takes a stylesheet formatted to a certain convention and produces a "living styleguide" that looks like this:

KSS styleguide screenshot

The concept is very much like phpDocumentor for PHP and Rdoc for Ruby, but for CSS instead.

The downside is that your stylesheet has to have been formatted using KSS comment conventions, so it won't help for regular stylesheets. Still, it's worth knowing about for future projects, especially if you're collaborating with a team.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.