Differencebetween the Initial and Unset Values

What is the difference between the initial and unset values?

According to your link:

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

Here is an example:

pre {

  color: #f00;

}

.initial {

  color: initial;

}

.unset {

  color: unset;

}

<pre>

  <span>This text is red because it is inherited.</span>

  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>

  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>

</pre>

What's the difference between `all: unset` and `all: revert'

From the MDN:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

So unset is either inherit or initial

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

Suppose the browser apply a default style to your element. Using revert, you will put back those styles while unset will not.

Example:

p {

  margin: 50px;

}

<p style="margin:revert">

  some text here

</p>

<p style="margin:unset">

  some text here

</p>

What does does the z-index value 'unset' do?

Unset is a global value. It is not just a value for z-index.

From MDN:

The unset CSS keyword resets a property to its inherited value if it
inherits from its parent, and to its initial value if not. In other
words, it behaves like the inherit keyword in the first case, and like
the initial keyword in the second case. It can be applied to any CSS
property.

What does unset value mean in CSS?

unset means

If the cascaded value of a property is the unset keyword, then if it is an inherited property, this is treated as inherit, and if it is not, this is treated as initial. This keyword effectively erases all declared values occurring

In your case, position is not an inherited property so it will always consider initial

Each property has an initial value, defined in the property’s definition table.

For position, it's static So you can simply use position:static and it will behave the same as position:unset

Reference: https://drafts.csswg.org/css-cascade-3/

To make this more generic you have to either use:

property:inherit if it's an inhertied propety
property:<initial_value> if it's not an inhertied propety. Then you look at the property’s definition table to find the initial value.

Sample Image

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Understanding how initial values work with inherited and non-inherited properties

Initial Value

The initial value of a property is the value assigned to the property in the W3C specification definition.

For example:

Sample Image

If the author or browser do not define this property, then CSS will refer to the initial value.

Inherited Properties

For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.

Some CSS properties can inherit their value. Others can not. This behavior is also established in the property definition (see Inherited in image above).

If a property can inherit, that means the property will – in cases where the value has not been specified – take the computed value of that property from the parent.

Because a property that can inherit will always look to the parent for a value when it is not specified, there is no need for the initial value of the property to appear anywhere in the document, except on the root element.

An inheritable property anywhere in the document, no matter how deeply nested, will keep looking up one level for a value, until it reaches the root element. That's why an initial value only needs to exist on the root element.

Non-Inherited Properties

For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

Properties that don't inherit will not look to their parent for guidance. Hence, the initial value is applied in all cases when it is not specified.

How to distinguish between unset and no-assignment for NULL values?

PHP has no way to differentiate between unassigned and null variables.
This makes it pretty unavoidable to keep track of which properties should be overwritten.

I see that you have two concerns:

Keeping Data immutable
Keeping the interface of Data clean (e.g. enforcing strict types)

One of the simplest datastructures that is able to track "defined" and "undefined" properties is an \stdClass object (but an array is perfectly fine too).
By moving the merge() method into the Data class you will be able to hide any implementation details - keeping the interface clean.

An implementation might look something like this:

final class Data {

    /** @var \stdClass */
    protected $props;

    // Avoid direct instantiation, use ::create() instead
    private function __construct()
    {
        $this->props = new \stdClass();
    }

    // Fluent interface
    public static function create(): Data
    {
        return new self();
    }

    // Enforce immutability
    public function __clone()
    {
        $this->props = clone $this->props;
    }

    public function withSomeNumber(?int $someNumber): Data
    {
        $d = clone $this;
        $d->props->someNumber = $someNumber;
        return $d;
    }

    public function withSomeString(?string $someString): Data
    {
        $d = clone $this;
        $d->props->someString = $someString;
        return $d;
    }

    public function getSomeNumber(): ?int
    {
        return $this->props->someNumber ?? null;
    }

    public function getSomeString(): ?string
    {
        return $this->props->someString ?? null;
    }

    public static function merge(...$dataObjects): Data
    {
        $final = new self();

        foreach ($dataObjects as $data) {
            $final->props = (object) array_merge((array) $final->props, (array) $data->props);
        }

        return $final;
    }
}

$first = Data::create()
    ->withSomeNumber(42)
    ->withSomeString('foo');

// Overwrite both someNumber and someString by assigning null
$second = Data::create()
    ->withSomeNumber(null)
    ->withSomeString(null);

// Overwrite "someString" only
$third = Data::create()
    ->withSomeString('bar');

$merged = Data::merge($first, $second, $third); // Only "someString" property is set to "bar"
var_dump($merged->getSomeString()); // "bar"

What's the difference between CSS inherit and initial?

The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.

For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.

For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.

The inherit keyword means use whatever value is assigned to my parent.

Source : https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

Difference between local variable initialize null and not initialize?

The answer depends on what type of variable are you referring.

For class variables, there's no difference, see the JLS - 4.12.5. Initial Values of Variables:

... Every variable in a program must have a value before its value is
used:

For all reference types (§4.3), the default value is null.

Meaning, there is no difference, the later is implicitly set to null.

If the variables are local, they must be assigned before you pass them to a method:

myMethod(x); //will compile :)
myMethod(y)  //won't compile :(

Why can't values on the ::after pseudo-element be unset?

According to this:

unset is a CSS value that's the same as "inherit" if a property is
inherited or "initial" if a property is not inherited

As after element is inherited from p element, unset will be as inherit and the color will be the red same as p tag.

Use initial instead

<!DOCTYPE html>

<html>

<head>

<style>

p {color:red}

p::after { 

  content: " and after";

  color: initial;

}

</style>

</head>

<body>

<p>before</p>

</body>

</html>

What is position initial in CSS

initial is not only used for position, it is a generic value which you can set it for any property in CSS.

From MDN:

The initial CSS keyword applies the initial value of a property to an
element. It is allowed on every CSS property and causes the element
for which it is specified to use the initial value of the property.

When using initial value, it will pick the value as defined in the spec as properties default.

Worth noting that this is not supported in IE at all as of now, not even in IE 11, so don't use it unless you dumping support for IE users.

How this works?

Think of it that you have an element p with nested span with color set to orange, and later you use initial for span it will fall to a default value as mentioned in w3c spec.

Demo

span {
  color: red; 
  /* won't make any difference */
}

p {
  color: orange;
}

p span {
  color: initial; 
  /* sets to initial value defined in spec/user-agent */
}

Do not confuse it with inherit

inherit is something different all-together compared to initial. Where initial will pick the value from :root, inherit will take the value from it's parent. :root here am talking about initial values defined in the spec and is adapted by browsers.