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)

2 Likes

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 | zaydek.github.com/debug.css */
*: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