CSS Deconstructed
This extension breaks down then reapplies the CSS (one rule at at time) for a specific element
Stats
This extension was removed from Chrome Web Store on
2022-04-30
By:
kabbnigam
Users:
434
Rating:
5.00
(2)
Creation date:
2016-07-23
Risk impact:
Low risk impact
Risk likelihood:
High risk likelihood
Manifest version:
2
Permissions:
Size:
40.94K
Stats date:
Other platforms
Not available on Firefox
Not available on Edge
Want to check extension ranking and stats more quickly for other Chrome extensions?
Install
Chrome-Stats extension
to view Chrome-Stats data as you browse the Chrome Web Store.
Summary
CSS Deconstructed is a tool for web developers to study the CSS of any given website. It allows users to remove all the styling for a specific element on a website and then re-apply the CSS rules one at a time at a speed of their preference. This tool provides valuable insight as to how different websites are constructed by visually building the site from scratch, right in front of your eyes.
How To Use:
- Inspect the HTML of a website you are interested in deconstructing.
- Choose the outer most selector that encompasses the part of the page you are interested in studying (**NOTE: If inspecting the whole page or a complex element, do note that it may take a while to rebuild.)
- Click the CSS Deconstructed Icon and enter in the selector, class, and/or ID.
- Choose how quickly you want each rule to be applied (often good to start with 10 ms)
- Click "Deconstruct!" to remove all CSS styling.
- Click "Build!" to re-apply each CSS rule.
- Watch your favorite site be rebuilt!
User reviews
Un-friggin-beliavable.
I really wanted to see how a page was constructed and with the CSS Deconstructed extension, now I can! Awesome!
Safety
Risk impact
CSS Deconstructed is relatively safe to use as it requires very minimum permissions.
Risk likelihood
CSS Deconstructed may not be trust-worthy. Avoid installing if possible unless you really trust this publisher.
Upgrade to see risk analysis details
Similar extensions
Here are some Chrome extensions that are similar to CSS Deconstructed:
HTML Hierarchy Visualizer
CSS Brio
DynamicCSSEditor
CSS Spy
HTML Visual Validation
CSS Picker (beta)
Differen-CSS
DevTools Classes & Atributes panel
Web Design Pirate
Style Adjuster
Restyler
eXtract Snippet
CSS Filters Editor
DOM X-Ray
Template Cloner
CSS Extractor (Extracts style & media rules)
Quickfix CSS Editor
Layout Debugger
Front End Developer Tools
Outliner CSS
SnipCSS
CSS Used
simple-debug.css
steven.massola
5.00
1,000+
JRAYCV
5.00
1,000+
jeiel.libert
4.67
155
SoftwareSeni
3.80
3,000+
btisseo
5.00
1,000+
konstantin.oficerov
3.67
901
ptdimitry
2.00
99
Gustavo Sillero
5.00
342
Dalimil Hajek
3.69
1,000+
http://thinkinghard.com
1.00
165
asimen1
5.00
350
Melwyn Pawar
3.06
7,000+
http://www.clicktorelease.com
5.00
217
the.nick.vincent
5.00
759
hanhyuk83.cho
3.25
588
http://gadget-vignette.blogspot.com
1.00
543
Quickfix Team
4.00
330
cdsnowden
3.25
594
Chance Dai
4.00
543
tarah
5.00
3,000+
https://www.snipcss.com
3.91
3,000+
http://bobscript.com
4.56
50,000+
http://chrisnager.com
4.69
1,000+