Rename articles prefixed with css-

snippets/css/s/centering.md

@@ -0,0 +1,27 @@
+---
+title: 4 ways to center content with CSS
+shortTitle: Centering content with CSS
+type: story
+language: css
+tags: [layout]
+author: chalarangelo
+cover: mountain-lake
+excerpt: Centering content with CSS might often feel tricky. Here are 4 easy tricks you can use in your code today.
+dateModified: 2021-09-28T19:35:49+03:00
+---
+
+### Flexbox
+
+Using flexbox to vertically and horizontally center content is usually the **preferred method**. All it takes is three lines of code in the container element to set `display: flex` and then center the child element vertically and horizontally using `align-items: center` and `justify-content: center` respectively. You can view the [Flexbox centering snippet](/css/s/flexbox-centering) for the code and examples.
+
+### Grid
+
+Using the grid module is very similar to flexbox and also a common technique, especially if you are **already using grid in your layout**. The only difference from the previous technique is the `display` which is set to `grid` instead. You can view the [Grid centering snippet](/css/s/grid-centering) for the code and examples.
+
+### Transform
+
+Transform centering uses, as the name implies, CSS transforms to center an element. It depends on the container element having a `position: relative`, allowing the child element to utilize `position: absolute` to position itself. Then `left: 50%` and `top: 50%` are used to offset the child element and `transform: translate(-50%, -50%)` to negate its position. You can view the [Transform centering snippet](/css/s/transform-centering) for the code and examples.
+
+### Table
+
+Last but not least, table centering is an older technique which you might favor when working with **older browsers**. It depends on the use of `display: table` in the container element. This allows the child element to use `display: table-cell` in combination with `text-align: center` and `vertical-align: middle` to center itself horizontally and vertically. You can view the [Display table centering snippet](/css/s/display-table-centering) for the code and examples.

snippets/css/s/clamp.md

@@ -0,0 +1,21 @@
+---
+title: "Tip: Use clamp() in CSS for responsive typography"
+shortTitle: CSS clamp()
+type: tip
+language: css
+tags: [visual]
+author: chalarangelo
+cover: strawberries
+excerpt: Implement responsive typography with the CSS clamp() function.
+dateModified: 2022-12-28T05:00:00-04:00
+---
+
+Responsive typography has been in fashion for a while now, but some developers find it hard to implement. This is usually due to confusing algebraic formulas or complex hacks. Luckily, CSS has introduced the `clamp()` function, which makes it easy to create responsive typography with a single line of code. All you need to do is set the minimum, maximum, and preferred value and the browser will do the rest.
+
+```css
+h2 {
+  font-size: clamp(1.5rem, 5vw, 3rem);
+}
+```
+
+For a more complex example, take a look at the [Fluid typography snippet](/css/s/fluid-typography).

snippets/css/s/code-reviews.md

@@ -0,0 +1,34 @@
+---
+title: How do you review CSS code in Pull Requests?
+shortTitle: CSS code reviews
+type: story
+language: css
+tags: [webdev]
+author: chalarangelo
+cover: green-css
+excerpt: Reviewing CSS code is a skill that takes time to master. Here are some tips from my personal experience to help you get started.
+dateModified: 2023-05-21T05:00:00-04:00
+---
+
+Reviewing CSS code is a bit different than reviewing JavaScript code. In fact, many developers pay little attention to CSS, which can lead to problems down the line. Yet, many developers don't know how to review CSS code properly. In this post, we'll go over some of the things you should look for when reviewing CSS code in Pull Requests.
+
+### Visual check
+
+The very first step when reviewing CSS is to check if the **result looks right**. This might mean comparing the end result to a **design mockup** or checking if every interaction behaves according to the animation principles the team has agreed upon. **Responsiveness** is also a key factor to consider, so you should check if the page looks right on **different screen sizes**. The visual check is probably the most straightforward and important step, but unfortunately many developers stop there.
+
+### Code style
+
+Your team should have set up a **linter and formatter** for CSS and, if you haven't, you should do it as soon as possible. This will help you enforce a consistent code style and make the code easier to read and maintain. Provided that's the case, you should check for **conventions** that the linter can't automatically enforce. These often include naming conventions, proper documentation or the use of CSS custom properties in place of hard-coded values.
+
+### Specificity
+
+CSS selectors can be easily abused, causing headaches later down the line. Having clear conventions usually resolves a lot of issues, but things can slip through the cracks. Ensuring specificity is **as low as possible** and that selectors are **not too generic or overly complex** will help increase the code's maintainability.
+
+### Leftovers
+
+In an ideal scenario, the Pull Request author has a clear vision of the CSS they are writing and everything works out perfectly the first time. As you know, that's rarely the case, meaning experimentation and changes will happen during development. As the code changes, some **old code** might hang around without contributing anything to the page. One of the most common examples I've stumbled upon are flexbox-related properties for non-flexbox elements. These take a bit of time to spot, but they can be easily removed, saving you problems in the future.
+
+### Performance
+
+CSS performance is very often overlooked. Simple rules, deduplication and minimum overrides are some of the things that can be done to improve performance. Understandably, this sort of opportunity is **hard to spot**, but it's worth keeping an eye out for. That being said, don't go overboard with performance optimizations. If you're not sure if something is worth it, you should probably leave it as is.
+

snippets/css/s/current-color.md

@@ -0,0 +1,36 @@
+---
+title: The currentColor CSS keyword
+type: tip
+language: css
+tags: [visual]
+author: chalarangelo
+cover: picking-berries
+excerpt: The `currentColor` CSS keyword is a nifty alternative to custom properties for simple use cases.
+dateModified: 2022-11-30T05:00:00-04:00
+---
+
+Modern CSS supports custom properties, yet the `currentColor` keyword precedes them by a few years. Thus, you might still find it in the wild and it is worth knowing what it does and how it works.
+
+```html
+<p>My <span>background</span> is the same color as my <a href="#">text</a>.</p>
+```
+
+```css
+p {
+  color: #101010;
+}
+
+p, p > * {
+  background-color: currentColor;
+}
+
+a {
+  color: #0077ff;
+}
+
+span {
+  color: #fd203a;
+}
+```
+
+`currentColor` contains the current value of the `color` property of the element. It is useful when you want to use the same color for multiple properties, such as `border-color` or `background-color`. It also respects the cascade, so if no value is provided for `color`, it will use the value of the `color` property of the parent element.

snippets/css/s/easing-variables.md

@@ -0,0 +1,43 @@
+---
+title: "Tip: CSS easing variables"
+shortTitle: CSS easing variables
+type: tip
+language: css
+tags: [animation]
+author: chalarangelo
+cover: curve
+excerpt: Learn how to use the `cubic-bezier()` class of easing functions and create beautiful animations that stand out.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+Most web developers use the built-in `ease`, `ease-in`, `ease-out` or `ease-in-out` functions for most use-cases of `transition-timing-function` in their designs. While these are perfectly fine for everyday use, there's a far more powerful, yet intimidating option available, the [`bezier-curve()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) function.
+
+Using the `bezier-curve()` we can easily define custom easing variables that can help our designs pop out. In fact the built-in functions mentioned above can also be written using the `bezier-curve()` function. Here's a handful of useful easing functions stored in CSS variables for ease of use:
+
+```css
+:root {
+  /* ease-in corresponds to cubic-bezier(0.42, 0, 1.0, 1.0) */
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+
+  /* ease-out corresponds to cubic-bezier(0, 0, 0.58, 1.0) */
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+  /* ease-in-out corresponds to cubic-bezier(0.42, 0, 0.58, 1.0) */
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+```

snippets/css/s/footer-at-the-bottom.md

@@ -0,0 +1,53 @@
+---
+title: How can I ensure the footer is always at the bottom of the page?
+shortTitle: Footer at the bottom
+type: question
+language: css
+tags: [layout]
+author: chalarangelo
+cover: flower-shape-sunset
+excerpt: Make sure the footer stays at the bottom of the page, instead of floating up when the content is too short.
+dateModified: 2022-10-30T05:00:00-04:00
+---
+
+Preventing the footer from floating up the page is important when trying to create a polished website. Pages with **short content** can run into this issue, but it's easy to fix with a few lines of CSS. Assuming your HTML looks something like the snippet below, here are two modern ways to ensure the footer is always at the bottom of the page:
+
+```html
+<body>
+  <main><!-- Main content --></main>
+  <footer><!-- Footer content --></footer>
+</body>
+```
+
+### Using Flexbox
+
+You can use flexbox to ensure that the footer is always at the bottom of the page. This is done by setting the giving the `body` element `min-height: 100vh`, `display: flex` and `flex-direction: column`. Then, give the `footer` element a `margin-top: auto` to make its margin fill the remaining space between it and its previous sibling. Note that this technique will not stretch the previous sibling, but rather **push the footer to the bottom of the page**.
+
+
+```css
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  margin-top: auto;
+}
+```
+
+### Using Grid
+
+You can also use grid in a very similar fashion. Simply swap `display: flex` for `display: grid` and `flex-direction: column` for `grid-template-rows: 1fr auto` in the `body` element. No additional attributes are needed for the `footer` element. In this case, the `fr` unit is leveraged to stretch the `main` element to **fill the remaining space**.
+
+```css
+body {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
+```
+
+### Notes
+
+As you can see, both techniques are straightforward to implement. Depending on your needs one might be more suitable than the other. Generally speaking, grid is more flexible in most cases and can help if you have more complex layouts, which can include a header or sidebar.

snippets/css/s/inherited-properties-cheatsheet.md

@@ -0,0 +1,51 @@
+---
+title: CSS inherited properties cheatsheet
+shortTitle: Inherited properties
+type: cheatsheet
+language: css
+tags: [layout]
+author: chalarangelo
+cover: half-trees
+excerpt: A quick reference for inherited CSS properties.
+dateModified: 2022-11-20T05:00:00-04:00
+---
+
+The [CSS specification](https://www.w3.org/TR/CSS21/propidx.html) clearly states which CSS properties are inherited but the related appendix is not the most user-friendly resource. Here's a quick reference of the inherited properties that you are most likely to run into:
+
+- `border-collapse`
+- `border-spacing`
+- `caption-side`
+- `color`
+- `cursor`
+- `direction`
+- `empty-cells`
+- `font-family`
+- `font-size`
+- `font-style`
+- `font-variant`
+- `font-weight`
+- `font-size-adjust`
+- `font-stretch`
+- `font`
+- `letter-spacing`
+- `line-height`
+- `list-style-image`
+- `list-style-position`
+- `list-style-type`
+- `list-style`
+- `orphans`
+- `quotes`
+- `tab-size`
+- `text-align`
+- `text-align-last`
+- `text-decoration-color`
+- `text-indent`
+- `text-justify`
+- `text-shadow`
+- `text-transform`
+- `visibility`
+- `white-space`
+- `widows`
+- `word-break`
+- `word-spacing`
+- `word-wrap`

snippets/css/s/nested-border-radius.md

@@ -0,0 +1,28 @@
+---
+title: "Tip: Perfect nested border radius in CSS"
+shortTitle: Perfect nested border radius in CSS
+type: tip
+language: css
+tags: [visual]
+author: chalarangelo
+cover: rocky-beach-waves
+excerpt: Nesting elements with rounded borders can look very wrong if not done correctly. Here's a quick tip on how to do it right.
+dateModified: 2022-04-03T05:00:00-04:00
+---
+
+Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is **calculate the border radius of one of the elements and the distance between them**. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as `innerRadius + distance = outerRadius` or more tersely `R1 + D = R2`.
+
+![Nested border radius formula](./illustrations/border-radius.png)
+
+Let's take a look at a simple CSS example. Say we want to style two nested boxes with rounded borders. The outer box has a `border-radius` of `24px` and a `padding` of `8px`. Using the previous formula, we can deduce that the inner box should have a `border-radius` of `16px`.
+
+```css
+.outer {
+  border-radius: 24px;
+  padding: 8px;
+}
+
+.inner {
+  border-radius: 16px;
+}
+```

snippets/css/s/print-stylesheet.md

@@ -0,0 +1,90 @@
+---
+title: CSS Print Stylesheet
+type: story
+language: css
+tags: [visual]
+author: chalarangelo
+cover: cozy-desk-setup
+excerpt: A short opinionated print stylesheet to make your websites look great on paper.
+dateModified: 2023-06-11T05:00:00-04:00
+---
+
+While it's not that often we physically print content from the web, **print stylesheets shouldn't be overlooked**. They can be used to make sure that the content of your website is presented in a legible and print-friendly manner. Here's a simple, opinionated print stylesheet that you can use as a base for your own:
+
+```css
+@media print {
+  @page {
+    size: A4;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  body, p, h1, h2, h3, h4, h5, h6, li {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 12pt;
+    font-weight: normal;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+
+  h1 {
+    font-size: 24pt;
+  }
+
+  h2 {
+    font-size: 18pt;
+  }
+
+  h3 {
+    font-size: 14pt;
+  }
+
+  a:any-link {
+    color: #0000FF;
+    text-decoration: none;
+  }
+
+  a:any-link::after {
+    content: " [" attr(href) "] ";
+  }
+
+  img {
+    width: 100%;
+  }
+
+  header, footer, nav, aside, form, iframe, script {
+    display: none;
+  }
+}
+```
+
+- `@media print` - The print media query is used to apply styles when the page is printed.
+- `@page`:
+  - `size` - Specify the page size.
+- `body`:
+  - `margin` - Remove the default margin.
+  - `padding` - Remove the default padding.
+- `body, p, h1, h2, h3, h4, h5, h6, li`:
+  - `font-family` - Use print-friendly fonts.
+  - `font-size` - Use a legible font size.
+  - `font-weight` - Reset the font weight.
+- `h1, h2, h3, h4, h5, h6`:
+  - `font-weight` - Make headings bold.
+  - `margin-bottom` - Add some space between headings and the content below them.
+- `h1`-`h3`:
+  - `font-size` - Use a larger font size for headings.
+- `a:any-link`:
+  - `color` - Use a print-friendly color for links.
+  - `text-decoration` - Remove the underline from links.
+- `a:any-link::after`:
+  - `content` - Add the link URL after the link.
+- `img`:
+  - `width` - Make images fill the page width.
+- `header, footer, nav, aside, form, iframe, script`:
+  - `display` - Remove unnecessary elements from the page.

snippets/css/s/pseudo-classes.md

@@ -0,0 +1,25 @@
+---
+title: What are CSS pseudo-classes?
+shortTitle: CSS pseudo-classes
+type: question
+language: css
+tags: [webdev]
+author: chalarangelo
+cover: orange-flower
+excerpt: Learn how to use CSS pseudo-classes to style an element based on changes to its state.
+dateModified: 2021-11-07T16:34:37+03:00
+---
+
+CSS pseudo-classes provide a way to style elements, based on changes to their state. For example, `:hover` can be used to apply additional styles to an element when the user's pointer hovers over it.
+
+Pseudo-classes let you apply styles to elements in relation to the content of the document tree (e.g. `:first-child`), external factors such as the history of the navigator (e.g. `:visited`), the status of their content (e.g. `:checked`) or the position of the mouse (e.g. `:hover`).
+
+### Commonly used pseudo-classes
+
+Below is a list of the top 5 most commonly used pseudo-classes and their usage. This list is by no means complete. You should always refer to relevant documentation from authoritative sources, such as [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) for more information.
+
+- `:hover`, `:focus` and `:active` are used to provide feedback for user interaction (e.g. changing a button's color on hover)
+- `:link` and `:visited` are useful for styling links based on navigation history (e.g. changing the color of visited links)
+- `:first-child`, `:last-child`, `:nth-child()` and `nth-last-child()` are useful when working with collections of elements
+- `:not()` is used to match everything except the given selector and can be useful in styling hard to select elements
+- `:lang()` allows you to apply special styles based on the language of the document and is useful for multilingual websites

snippets/css/s/reset.md

@@ -0,0 +1,87 @@
+---
+title: CSS Reset
+type: story
+language: css
+tags: [visual]
+author: chalarangelo
+cover: bridge-over-road
+excerpt: A short, opinionated CSS reset to make your websites look great everywhere.
+dateModified: 2022-10-16T05:00:00-04:00
+---
+
+Browsers nowadays are much better at presenting HTML in a consistent manner, making CSS resets of the past largely unnecessary. However, **default browser styles are not particularly great** in most cases, which is why there are tons of CSS resets out there. Drawing inspiration from some of them, here's my opinionated CSS reset, along with an explanation of why I chose to include each rule.
+
+```css
+html {
+  max-width: 70ch;
+  margin: auto;
+  padding: 3em 1em;
+  font-family: system-ui, 'Segoe UI', Roboto, Cantarell,
+    'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 1.25em;
+  line-height: 1.75;
+}
+
+body {
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 3em 0 1em;
+}
+
+p, ul, ol {
+  margin-bottom: 2em;
+  color: #1d1d1d;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+pre, code, kbd {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+```
+
+- `html`:
+  - `max-width` - Use `ch` units to set the maximum width in the middle of the optimal readable range (60-80 characters).
+  - `margin` - Center content on the page.
+  - `padding` - Prevent edge-to-edge text on smaller viewports.
+  - `font-family` - Use the [system font stack](/css/s/system-font-stack) to ensure the best possible font rendering. `system-ui` is a new generic font family that replaces `-apple-system` and `BlinkMacSystemFont`.
+  - `font-size` - Use a larger font size for better readability and to keep up with recent design trends.
+  - `line-height` - Use a larger line height to increase visual clarity.
+- `body`:
+  `margin` - Remove the default margin in all browsers.
+- `h1`-`h6`:
+  - `margin` - Use larger margins for headers to improve visual hierarchy.
+- `p`, `ul`, `ol`:
+  - `margin-bottom` - Add spacing between textual elements.
+  - `color` - Soften text color to improve readability.
+- `small`:
+  - `font-size` - Correct font size discrepancies between browsers.
+- `sub`, `sup`:
+  - `font-size` - Correct font size discrepancies between browsers.
+  - `line-height` - Prevent elements from affecting line height.
+  - `position` - Position elements relative to parent.
+  - `vertical-align` - Align elements to the baseline.
+  - `bottom`, `top` - Correctly position elements.
+- `pre`, `code`, `kbd`:
+  - `font-family` - Use monospace fonts for code elements.
+  - `font-size` - Correct font size discrepancies between browsers.

snippets/css/s/root-vs-html.md

@@ -0,0 +1,33 @@
+---
+title: What's the difference between :root and html in CSS?
+shortTitle: :root vs html
+type: story
+language: css
+tags: [layout,selector]
+author: chalarangelo
+cover: tree-roots
+excerpt: The CSS selectors used to target the root element of an HTML share some similarities, but they also have some differences.
+dateModified: 2022-05-22T05:00:00-04:00
+---
+
+CSS has two ways to target the root element of an HTML document - the `:root` pseudo-class and the `html` selector. While these are very similar to each other, they have a couple of differences you should know.
+
+### Selector specificity
+
+The `:root` selector has a higher specificity than the `html` selector. This is because `:root` is a pseudo-class selector, while `html` is a type selector.
+
+```css
+:root {
+  background-color: red;
+}
+
+html {
+  background-color: blue;
+}
+
+/* The HTML document's root element will have a red background-color.  */
+```
+
+### Targeting the root element
+
+CSS can be used to style other types of documents, apart from HTML. This is where the `:root` element comes in to play, allowing you to style the root element of a document. This can be especially important when styling SVG documents, where the `html` selector will not work.

snippets/css/s/select-any-link.md

@@ -0,0 +1,21 @@
+---
+title: "Tip: Select any link with CSS"
+shortTitle: "CSS :any-link pseudo-class"
+type: tip
+language: css
+tags: [visual,interactivity]
+author: chalarangelo
+cover: round-leaves
+excerpt: You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not.
+dateModified: 2022-03-06T05:00:00-04:00
+---
+
+Styling links with CSS is considered straightforward, with most developers using the `:link` and `:visited` pseudo-classes. While this solution is very common, there's a less verbose alternative in the form of the [`:any-link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link) pseudo-class. This pseudo-class selects all links, regardless of whether they have been visited or not. Thus, it acts as a catch-all for all links on the page.
+
+```css
+:any-link {
+  color: #0444f6;
+}
+```
+
+One important note is that using `:any-link` is different to using the `[href]` attribute selector. The `:any-link` pseudo-class does not select empty links, whereas the `[href]` attribute selector does.

snippets/css/s/style-default-links.md

@@ -0,0 +1,22 @@
+---
+title: "Tip: Style links without a class"
+shortTitle: Style default links
+type: tip
+language: css
+tags: [visual,interactivity]
+author: chalarangelo
+cover: citrus-drink
+excerpt: A short summary of your story up to 180 characters long.
+dateModified: 2022-11-23T05:00:00-04:00
+---
+
+When styling injected or generated HTML content, you might not have access to the classes or IDs of the elements you want to style. This can become especially annoying when dealing with link elements. Luckily, you can use the `:not()` selector with an appropriate attribute selector to check for the absence of a class and style links accordingly.
+
+```css
+a[href]:not([class]) {
+  color: #0077ff;
+  text-decoration: underline;
+}
+```
+
+As a bonus tip, you can use [the previous tip about selecting any link](/css/s/select-any-link) to further enhance this solution.

snippets/css/s/unitless-line-height.md

@@ -0,0 +1,25 @@
+---
+title: Why should line-height be unitless in CSS?
+shortTitle: Unitless line height
+type: tip
+language: css
+tags: [layout,visual]
+author: chalarangelo
+cover: gold-typewriter
+excerpt: You might have heard that `line-height` should be unitless, but do you know why?
+dateModified: 2022-11-27T05:00:00-04:00
+---
+
+I've often heard that `line-height` should always be **unitless**. In my earlier coding years, I didn't question it much, but lately I've come to wonder why that is. In my mind `1.5` and `1.5em` should produce the same result, right? Turns out, they don't.
+
+There's a **subtle difference** between the two and it has to do with the fact that `line-height` is an inherited property. A unitless value will be inherited as-is, meaning the actual value will be recalculated for each element, accounting for the `font-size` of the element. However, a `line-height` with any unit will be calculated once and then inherited as a fixed value. This can cause vastly different results, especially if the declaration is in the `body` element or something similar.
+
+Speaking of the `body` element, it could be a good idea to define your base `line-height` as a unitless value there to minimize repetition:
+
+```css
+body {
+  line-height: 1.5;
+}
+```
+
+So, is `line-height` with units prohibited and should we always use unitless values? Not necessarily. Factors such as codebase conventions, design systems and personal preference play a role here. For example, maintaining an exact, perfect vertical rhythm with unitless `line-height` values can be a bit tricky. In such cases, using `line-height` with units can be a good idea, but remember to **be consistent** to avoid headaches.

snippets/css/s/units-cheatsheet.md

@@ -0,0 +1,25 @@
+---
+title: CSS units Cheat Sheet
+type: cheatsheet
+language: css
+tags: [layout,cheatsheet]
+author: chalarangelo
+cover: measuring
+excerpt: Learn everything you need to know about CSS units with this handy cheatsheet.
+dateModified: 2021-06-12T19:30:41+03:00
+---
+
+- `px`: Absolute pixel value
+- `rem`: Relative to the `font-size` of the root element
+- `em`: Relative to the `font-size` of the element
+- `%`: Relative to the parent element
+- `vw`: Relative to the viewport's width, `1vw` = `1%` * viewport width
+- `vh`: Relative to the viewport's height, `1vh` = `1%` * viewport height
+- `vmin`: Relative to the viewport's smaller dimension, `1vmin` = min(`1vh`, `1vw`)
+- `vmax`: Relative to the viewport's larger dimension, `vmax` = max(`1vh`, `1vw`)
+- `ch`: Relative to the width of the glyph "0" of the element's font
+- `in`: Inches `1in` = `2.54cm` = `96px`
+- `pc`: Picas `1pc` = `1in` / `6` = `16px`
+- `pt`: Points `1pt` = `1in` / `72` = `1.333px` (approximately)
+- `cm`: Centimeters `1cm` = `96px` / `2.54` = `37.8px` (approximately)
+- `mm`: Millimeters `1mm` = `1cm` / `10` = `3.78px` (approximately)

snippets/css/s/variables.md

@@ -0,0 +1,67 @@
+---
+title: What are CSS variables and where can I use them?
+shortTitle: CSS variables
+type: question
+language: css
+tags: [visual,layout]
+author: chalarangelo
+cover: css-variables
+excerpt: Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
+dateModified: 2021-09-28T19:52:58+03:00
+---
+
+CSS variables (officially called CSS **custom properties**) behave much like variables in other programming languages. They allow you to define named variables that contain specific values that can be reused within the CSS document. As specified in the custom property notation, CSS variables are prefixed with two dashes (e.g. `--my-color: black`). To access them, you can use the `var()` function (e.g. `color: var(--my-color)`). CSS variables are exceptionally useful for **sharing styles** between different elements and components. Examples include but are not limited to vertical rhythm, typography variables and color palettes.
+
+One of their most common use-cases is **theming and dark mode**. CSS variables can be used to create a shared palette across the whole website and easily swap it for a different one. This is often accomplished by applying a class to a common ancestor (e.g. the `<body>` element). This example demonstrates global variables defined in the `:root` element and cascading, as elements inherit values from their parents:
+
+```css
+/* Global variables are defined in the :root element. */
+:root {
+  --bg-color: #fff;
+  --main-color: #000;
+  --secondary-color: #222;
+}
+/* Elements inherit variables from their parents. */
+body {
+  background-color: var(--bg-color);
+  color: var(--main-color);
+}
+small {
+  color: var(--secondary-color);
+}
+/* Elements can define their own values and variables, overriding inherited ones.*/
+body.dark {
+  --bg-color: #080808;
+  --main-color: #fff;
+  --secondary-color: #ccc;
+}
+```
+
+Another useful example is **defining shared customized styles** for certain variants of an element. This allows the customization of whole trees of components without having to repeat any styles. The following example demonstrates cascading even better than the previous one. It also introduces the idea of sharing styles between different elements:
+
+```css
+.btn {
+  --bg-color: #002299;
+  --text-color: #fff;
+  --highlight-color: #669900;
+
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+/* --highlight-color is also available to the children of .btn */
+.btn .highlight {
+  color: var(--highlight-color);
+}
+/* .btn.danger .highlight will use the --highlight-color defined in .btn-danger */
+.btn-danger {
+  --bg-color: #dd4a68;
+  --text-color: #000;
+  --highlight-color: #990055;
+}
+```
+
+Finally, keep in mind the following useful tips for working with CSS variables:
+
+- You can define **fallback values**, by providing a second argument to the `var()` function (e.g. `var(--text-color, black)` will default to `black` if `--text-color` is not defined).
+- CSS variables are **case sensitive**, so mind your capitalization. They can also be inlined in HTML like any other style (e.g. `<div style="--text-color: red">`).
+- You can nest `var()` calls, using another variable as fallback (e.g. `var(--main-color, var(--other-color))`), pass them to other functions such as `calc()` or even assign one variable to another (e.g. `--text-color: var(--main-color)`).