How to easily "see" separate element areas

Atm, I tend to go through each div or other element in CSS and add in a “background: random color”, then work on everything until it’s in the right place and then erase all of these backgrounds at the end.

What I want to know is… Is there any easier way?

Is there some kind of visual studio plugin that will highlight all my different areas to save some time?

* { outline: 1px solid #f7fcfd; }
* * { outline: 1px solid #e0ecf4; }
* * * { outline: 1px solid #bfd3e6; }
* * * * { outline: 1px solid #9ebcda; }
* * * * * { outline: 1px solid #8c96c6; }
* * * * * * { outline: 1px solid #8c6bb1; }
* * * * * * * { outline: 1px solid #88419d; }
* * * * * * * * { outline: 1px solid #810f7c; }
* * * * * * * * * { outline: 1px solid #4d004b; }

Or background. outline is better if you need to see the content, background is better if you don’t (ie you’re trying to get the overall layout right)


I’d never thought to use outlines, that helps so much more!

Do you have some way to assign this as a shortcut or would you type it out for each project?

I literally created emmet snippets: by for background-color: yellow;, bp for background-color: pink; etc. just for this :laughing:

I did used to have a base stylesheet I always built on top of. Then I had a version in a gist and pasted it but I think it got culled at some point. I just tend to write it when needed now (tho I don’t generally need it as much as I used to for various reasons)

Thanks guys I’ve done a combo of making an emmet snippet with the outlines for different layers. All I do now is type “layout”.

So much easier!

Just came across a neat technique in a bulma tutorial, that is like the outline override mentioned by @DanCouper, plus the background override mentioned by @snigo and a shadow override combined - excluding selectors from SVGs. In the tutorial he uses a debug.css file that he links to and comments on/off. Would probably make a handy snippet as well.

/*! debug.css | MIT License | */
*: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;

1 Like