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.
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 (
JSON.stringify with additional arguments (
null, 2) formats this object as pretty-printed JSON string. Select and save this text to a file, say
Repeat the same process with the same element in another view, save your element’s style JSON text in another file,
Now open both files in a diff tool of your preference. I’m using WinMerge. You’ll spot the difference immediately, something like this:
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.