Closed mdgriffith closed 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.
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.
I like the set of properties defined іn Yoga, the layout library behind React Native. It doesn't cover anything related to text.
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 :)
These are mostly handled in the v3
design!
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
position:absolute
childrenz-index
,left
,right
,top
,bottom
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
instyle-elements
, and the included css reset sets the default toposition: 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.