4jenqa
Last Updated: February 25, 2016
·
786
· sodevious
F66d125e3355ffd90d62dffa5e54939c

CSS Layout Testing Snippet

As a pixel perfectionist, I like knowing that my layout and elements are exactly as I imagine they should be. I usually find myself adding random red backgrounds to certain elements while I am building my layout. I found this snippet of code to be immensely useful while testing:

.testing {
  * { background: rgba(123,213,100, 0.1); }
}

Then just assign a div with lots of things in it with a class of testing!

Say Thanks
Respond

2 Responses
Add your response

5157
D42a7264714dee5006b9c99d2567a320

Nice tip! I would also add !important so your testing styles always win the specificity war. Also, setting color: transparent; may be helpful if you just want to focus on block structure.
Putting it all together:

.test {
    * { 
        background: rgba(123,213,100, 0.1) !important;
        color: transparent !important;
    }
}
over 1 year ago ·
5158
F66d125e3355ffd90d62dffa5e54939c

@dpashkevich Ah, that was useful! Thanks!

over 1 year ago ·