Hacker News Reader

Comment by dmitriid | Hacker News Reader

> That's only a concern if your UI elements depend on global styles, right?

No.

   div {
      padding: 15em;
   }

This will affect all of your styles. CSS is a flat global namespace where you fight to style your local components by overriding rules with increasing specificity.

View on HN

Given the abundance of div elements in modern HTML, a CSS rule to set padding in all of them can only make sense in an unlikely minority of abnormally simple and constrained pages. Setting a huge, fixed 15em padding is also highly suspect.

You need to "fight" only in poorly designed systems; UI elements can pretend to have a hierarchical namespace and avoid all interference with other components, and pages can be designed systematically (e.g. box-sizing border-box vs. content-box, padding vs. margin, flex...) to simplify CSS rules.

div.arbitrary-ui-library-prefix-radio-button-group { padding:0.5em; border: 0.1em dotted rgba(0,0,0,0.3); }

div.arbitrary-ui-library-prefix-huge-padded-box-container { padding:15em; }

> You need to "fight" only in poorly designed systems;

So pretty much most systems, especially general web Dev and frameworks

> This will affect all of your styles.

Your example affects all div elements which are not styled. If you also include class and/or ID specific definitions then your padding setting doesn't cascade and those are not affected. That's the point of CSS.

> where you fight to style your local components

That's not true. Style changes do cascade but they only cascade where the designer intends them to cascade. If a designer specifies that all div components shall use the same padding then you can't complain that all div components are using the same padding.

Reply on news.ycombinator.com