search

mdgriffith / style-elements-design-discussion

BSD 3-Clause "New" or "Revised" License
8 stars 0 forks source link

Eliminating Properties #1

Closed mdgriffith closed 7 years ago

mdgriffith commented 7 years ago

Certain CSS properties cause a bunch of mysterious breakage and weird behavior. I'm looking to make some of them not expressible in style-elements and/or including a new default to override them via the built-in css reset.

If these properties are desperately wanted, they can always be expressed through the escape hatch Style.property "position" "static"

position: static

I can't come up for a reason for why you would want anything to be position: static. Maybe the position:absolute skipping feature could be considered useful...but I think that's actually a strong smell that your html should be reorganized. Looking at CSS styles in the wild via style-research also shows that using position:static for parent skipping is basically never done.

Action: no way to express position:static in style-elements, and the included css reset sets the default to position: relative

box-sizing: content-box

Action: Included reset sets this to box-sizing: content-box. Most high level websites looked at via style-research have this as the default.

Dremora commented 7 years ago

float is another property which I can't think of a proper use case for (and thus clear as well). Flexbox deals well with everything layout-related. In the last project I've been working on for two years we have banned float altogether via stylelint.

Dremora commented 7 years ago

OTOH, there might be limited use case for float when surrounding image with text. So this property should only be limited, if possible, to such use cases.

Dremora commented 7 years ago

I like the set of properties defined іn Yoga, the layout library behind React Native. It doesn't cover anything related to text.

mdgriffith commented 7 years ago

Yeah, I 100% agree float is a major pain and shouldnt be used for layout. Right now it's only allowed if it's the child of a textLayout (which is just traditional block layout). The main point I'm dealing with is how to enforce that. Right now the enforcement is just that it won't work though I'd much rather have it be some sort of type error.

I'm planning to address floats in the error prone properties issue once I get a chance to write about it :)

mdgriffith commented 7 years ago

These are mostly handled in the v3 design!