Syntax

CSS

@ rule

@media screen and (max-width: 40rem) {}

Commment

/* Comment text */
.selector {}

Custom Properties

.selector {
  border-radius: var(--border-radius);
  color: hsl(var(--hue), 80%, 50%);
}

Important

.hide {
  display: none !important;
}

Properties

.selector {
  background-image: linear-gradient(to bottom, hsla(220, 80%, 80%, 0.5), hsl(220, 80%, 50%, 0.5));
  color: hsl(220, 80%, 50%);
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
}

Selectors

a {
  text-decoration: underline;
}

String

.selector {
  content: 'text';
}

URL

.selector {
  content: url('image.png');
}

HTML

Attribute

<div aria-hidden="true"></div>

Comment

<!-- Comment text -->
Regular text

DOCTYPE

<!DOCTYPE html>
<html></html>

Embedded CSS & JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Page title</title>
    <style>
      @media print {
        p {
          color: red !important;
        }
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <script>
      if (true) {
        console.log('foo');
      }
    </script>
  </body>
</html>

Empty tag

<p></p>

Entity

&amp;

Invalid

</p <p>

Multiline tag

<p
  class="value"
>
  Text
</p>

JavaScript

Assignment

const CONSTANT = 10;
const truthy = true;
let pageTitle = 'Page title';

Comment

Block

/**
 * Block comment
 */

Inline

// Inline comment

Import

import { component as child } from 'index.js'

Indentation

if (true) {
  while (true) {
    doSomething();
  }
}

Operators

(1 + 2 * 3)/4 >= 3 && 4 < 5 || 6 > 7

Regex

const regex = /([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g;
const regex = /\/\*[\w\W]*?\*\//g;

Template string

const temp = `I am ${age} years old`;

Markdown

# Heading

## Content

### Text

Text block with [link](https://scottdejonge.com).

### List

#### Ordered list

1. Item 1
  1. Child item 1
2. Item 2

#### Unordered list

- Item 1
  - Child item 1
- Item 2