Cool tricks with CSS.

# Convention

## Don't use Margin

[Don't use Margin](https://www.amazon.com/dp/B0771V3SSP/?tag=wtpl-20)
Margin breaks component encapsulation because components impact
everything surrounding them and external to them. It also makes
reusability difficult and impacts external components. The stack
component, similar to other spacer components, is useful for adding
arbitrary spaces internal to and external from different components.
THese help define discrete units for space as well which can be
standardized across the application.

# Computation

CSS can do a lot more than we use it for: it can
[count](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style),
for one.

# Vulnerabilities

[saizai/cssfingerprint: a research project to see how well the CSS
history hack can fingerprint a
user](https://github.com/saizai/cssfingerprint)

## Do not blindly copy paste

[source](https://lyngvaer.no/log/browser-to-clipboard-tainted) In this
code segment, it's trivial to hide the truth of the text that's being
copied, thus resulting in a blind paste into terminal being malicious:

``` html
<style>
span {
    font-family: monospace;
    position: absolute;
    color: white;
    cursor: text;
}
span::selection {
    background: #accef7;
    color: #accef7;
}
span::before {
    content: "clip";
    position: absolute;
    color: black;
}
</style>
<span>silly</span>
```

One way the author recommends safe pasting is via this command:

``` zsh
alias prepaste='builtin fc -e "vim -c %d -c \"set paste\""'
```

This opens the line pasted in vim before sending it to the browser,
encouraging you to preview and edit it.

# Alignment tricks!

[Ten modern layouts in one line of
CSS](https://web.dev/one-line-layouts/)

## Transform

transform() operations occur outside of the flexbox algorithm, so things
can be displayed with flexbox then instantly transformed to their proper
position as desired. This also allows us to place an element entirely
out of the document flow! (adding a 'close' button, for example).