Re: [css-ui-3] box-sizing: padding-box

On 7/3/2015 2:18 AM, Jonathan Kingston wrote:
> Which means we are back to if:
>
> --margin-size: 2rem;
> --width-size: 20%;
> margin: 1rem var(--margin-size);
> width: calc(--width-size - var(--margin-size) * 2);
>
> is more readable than:
>
> width: 20%;
> margin: 1rem 2rem;
> box-sizing: margin-box;
>
> Authors choosing to extend the properties example would need to know of --width-size and --margin-size where as setting the width or margin works here.

Both of these examples require three declarations; you have a superfluous |--width-size| variable in the first example. Your first example should read something more like:

--x-margin: 2rem;
margin: 1rem var(--x-margin);
width: calc(20% - var(--x-margin) * 2);

Alternatively, one might use:

margin: 1rem 2rem;
width: calc(20% - 2rem * 2); /* width minus x-margins */

Those changes narrow the difference in code verbosity that is your apparent point.

On 7/3/2015 2:18 AM, Jonathan Kingston wrote:
> >>calc however as mentioned removes meaning
> >There are no semantics tied to CSS property values
>
> Less 'semantic' and more readable, CSS properties like all programming languages have intent.

"Semantics" are "meanings". Your two examples accomplish the same thing; there's no difference in meaning as there would be if one, say, used a cite element instead of an em element.

This logic is the equivalent of suggesting that the JavaScript code ++i has superior/inferior "semantics" or demonstration of "intent" in comparison with i += 1 or i = i + 1 despite the three constructs serving the same purpose. The techniques vary in simplicity, but the results are the same.

On 7/3/2015 2:18 AM, Jonathan Kingston wrote:
> The easier that is to read the easier a developers life is.
>
> The flex example would still need to use calc with min-width specified also variable width is often required.

Readability is a valid argument, but that brings us back to the costs versus benefits of |box-sizing: margin-box|. Specifically, that calls for use cases.

Florian's initial use case¹ has been demonstrated to be easily accomplished using other means. Ian's use case² (circa 1999) should probably be accomplished with x-padding on an ancestor element, but could also be accomplished using a calc() value. And the use case you've just presented³ should probably utilize the flexible box layout model (based on speculation that there should be four additional, 20%-wide boxes):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     <head>
         <title>HTML Demo</title>
         <style>
             * {
                 margin: 0; /* fallback */
                 margin: initial;
             }
             body {
                 display: flex;
                 background-color: white;
             }
             body > div {
                 background-color: silver;
                 flex-grow: 1;
                 justify-content: space-around;
                 margin: 1rem;
                 min-height: calc(100vh - 2rem);
             }
         </style>
     </head>
     <body>
         <div/>
         <div/>
         <div/>
         <div/>
         <div/>
     </body>
</html>

¹ https://lists.w3.org/Archives/Public/www-style/2015Jun/0123.html
² https://lists.w3.org/Archives/Public/www-style/1999Nov/0037.html
³ https://lists.w3.org/Archives/Public/www-style/2015Jul/0048.html

Attachments

Received on Thursday, 9 July 2015 03:58:46 UTC