Re: [csswg-drafts] Proposal: Add wrapper pseudo element

I came across this discussion after resorting to researching to see if a css pseudo wrapper element had miraculously been implemented after years of having to add wrapper divs to my designs for purely stylistic and layout reasons.

I wanted to added one of my biggest use cases for having to use wrappers and that is to support gutters in CSS with responsive design. A technique which is use often is to add an inner wrapper to a container and apply a negative margin to it so that top and right margins can be added to it's children to simulate guttering between elements. It has to be done this way because if the order of the elements change (i.e. using media queries) ot there are more than one row of elements then the margin must be applied to every child element and cannot be achieved using the `:first and :last-child` technique or `.row` technique. Guttering is so paramount to designs which is surprising because even now with the likes of flexbox and CSS grid layouts; guttering cannot be achieved using a "floating" method for content. CSS grid layout requires you to know to a large degree what the content is and where it will positioned dispute it having the best support for gutters. 

Therefore using wrappers is the most flexible and effective way to overcome these layout issues with respect to managing spacing between elements in web layouts. Yet having to use wrapper divs creates so much chaos which regards to managing CSS as they mess with the hierarchy of the DOM and CSS specifity becomes a real nightmare. It makes it almost impossible to reliably and consistently select especially when working on large teams made up of members of different skill levels.

I think that as the need for responsive sites and apps are growing it is becoming even more prominent that we must ease the burden of authoring HTML, without the need to add wrapper divs where CSS falls short.

-- 
GitHub Notification of comment by mindthetic
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/588#issuecomment-353231988 using your GitHub account

Received on Thursday, 21 December 2017 01:30:18 UTC