Add debugging class
zaydek-old opened this issue · comments
In the recent article, I published: https://medium.freecodecamp.org/learn-this-one-weird-trick-to-debug-css-88529aa5a6a3 I talked about a global CSS debugger. Another method of using this, however, is scoped to an element and its children. E.g.
.debug *:not(path):not(g) {
color: hsla(210, 100%, 100%, 0.9) !important;
background: hsla(210, 100%, 50%, 0.5) !important;
outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
box-shadow: none !important;
}
The difference here is that now whatever is classed as .debug so will it and its children expose the debugger, which could also be customized using CSS variables (such as color).
Pro-tip: do <html class="debug"> then the whole website debugged without a bookmark!
i'm into this. would be nice to point to fortune rather than write this debug class from scratch each time it's useful
@zaydek do you want to open a pr?