Sometimes a reusable HTML/CSS component or fragment may look differently across various surroundings, and I personally have killed several hours trying to spot that (most probably one single) pesky little descendant selector that causes this.

The same HTML/CSS component under different parents

I’d like to share a very simple trick how to spot these problems using a modern browser with developer tools and some text diffing tool. Let’s assume we’re using Google Chrome, however Mozilla Firefox or Internet Explorer or Microsoft Edge could also do just fine.

First, open the first page/view with our component and open Developer Tools (Cmd/Ctrl + Shift + I). In Elements tab, select  your element and type in Console: JSON.stringify(window.getComputedStyle($1), null, 2). window.getComputedStyle($1) returns an Object containing information of every CSS property (both explicitly defined and inherited) of the selected element ($1) and JSON.stringify with additional arguments (null, 2) formats this object as pretty-printed JSON string. Select and save this text to a file, say style-1.json.

Repeat the same process with the same element in another view, save your element’s style JSON text in another file, style-2.json.

Now open both files in a diff tool of your preference. I’m using WinMerge. You’ll spot the difference immediately, something like this:

CSS JSON diff sample in WinMerge

Now you see the exact CSS property that affects component’s layout, therefore can find out where particular rule that sets the property comes from.

Hope this helps to someone.