What are your thoughts on Modern built-in CSS Reset method

[boqsc]

I have been playing around with CSS Grid layout system,
and suddenly come up with this CSS reset technique:

    /* Modern CSS style reset */

    * { 
        all: unset;
    }

    head, head > * { 
        display: none !important;
    }

Did some Googling and Stackoverflow and couldn’t see anyone pointing out the problem with the head, style and title tags being displayed as blocks. I quickly fixed this by selecting head and everything inside head. Giving them display of none as was the default before any CSS reset.

So far, no more problems with this. Is there anything more that I must be aware while using this kind of technique?
making their original state

[Paulie_D]

I’ve never seen this issue you mention that would require this resolution.

Can you demonstrate it? Those elements would not be affected unless the html element has been given display:grid and there is no reason to do that….that’s what the body element is for.

[tomnoble92]

When would you ever need to style the head or title tag?

Can you give us an example?

[boqsc]

Surely, this is an example where, removing the lines
head, head > * {
display: none !important;
}

Will give you output of the CSS style in the top left side of the page, without anyone asking for it.

Codepen didn’t let me to put in my head tags that would contain title or style tags in the html part.

But the proof is there, try to uncomment my solution after you get annoyed of style tag being printed out.

https://codepen.io/boqsc/pen/ZodbQy

[boqsc]

Although, it seems that head is also visable that is of CodePen – A Pen by Feldwor.
So, here you got it folks.

[boqsc]

Yep, I finally getting to the conclusion that trying to make use of html tag might break the html standards.

[tomnoble92]

You don’t want to be setting every single element’s properties to inherit.

When you use
* {
all: unset;
box-sizing: border-box;
}

Your removing all the user agent styles.

For example style{display: none}

that’s why the stylesheet is printing to the page…same with the line of javascript.

[Author]

Posts