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