Web on Cyrus Yip's blog

What Is HTTP

Tue, 29 Oct 2024 00:00:00 +0800

Introduction #

HTTP (Hypertext Transfer Protocol) is a protocol for transferring information, such as HTML files. It’s the foundation of data communication for the World Wide Web. In a typical HTTP session, the client (such as a browser) sends a request to the server, which sends back a response.

HTTP Request #

A typical HTTP request consists of:

request line (request method, path, protocol version)
request header
empty line
optional message body

Here is an example of HTTP request message (curl --verbose https://cyrusyip.org/en/):

1
2
3
4


GET /en/ HTTP/2
Host: cyrusyip.org
User-Agent: curl/8.10.1
Accept: */*

HTTP Request Methods #

HTTP request methods (also called HTTP verbs) indicate the purpose of the request and what to expect. Here are the common request methods:

GET: request the specified resource
POST: sends information to the server

HTTP Response #

A typical HTTP response consists of:

status line (protocol version, status code, optional explanation of status code)
response header
empty line
optional message body

Here is an example of HTTP response message (curl --verbose https://example.com/):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


HTTP/2 200
age: 190635
cache-control: max-age=604800
content-type: text/html; charset=UTF-8
date: Mon, 28 Oct 2024 09:39:38 GMT
etag: "3147526947+gzip+ident"
expires: Mon, 04 Nov 2024 09:39:38 GMT
last-modified: Thu, 17 Oct 2019 07:18:26 GMT
server: ECAcc (sac/2571)
vary: Accept-Encoding
x-cache: HIT
content-length: 1256

<!doctype html>
<html>
<head>
content is stripped...
</head>

<body>
<div>
 <h1>Example Domain</h1>
 <p>This domain is for use in illustrative examples in documents. You may use this
 domain in literature without prior coordination or asking for permission.</p>
 <p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>

HTTP Status Codes #

HTTP status codes are three-digit numbers that indicate whether an HTTP request has been successfully completed. They are grouped in five classes:

1xx (Informational): The request was received, continuing process.
2xx (Successful): The request was successfully received, understood, and accepted.
3xx (Redirection): Further action needs to be taken in order to complete the request.
4xx (Client Error): The request contains bad syntax or cannot be fulfilled.
5xx (Server Error): The server failed to fulfill an apparently valid request.

Here are some commonly used HTTP status codes:

103 Early Hints: This status code lets the user agent preload resources while the server prepares a response.
200 OK: The request succeeded.
301 Moved Permanently: The URL of the requested resource has been permanently changed.
302 Found: The URL of the requested resource has been temporarily changed.
403 Forbidden: The client does not have access permission to the resource.
404 Not Found: The server cannot find the requested resource.
500 Internal Server Error: The server has encountered an unexpected condition that prevented it from fulfilling the request.
503 Service Unavailable: The server is not ready to handle the request. It may be down for maintenance, or it may be overloaded.

References #

What Is Ajax and How to Use it

Tue, 08 Oct 2024 00:00:00 +0800

Ajax (Asynchronous JavaScript and XML) is a method for sending and receiving data from a web server. It allows parts of a web page to be updated without reloading the whole page. Ajax isn’t a specific technology, but rather a concept that can be implemented using various methods: XMLHttpRequest, fetch() or libraries like Axios. Although Ajax originally used XML, it uses JSON more commonly nowadays.

Set Up a Test Server #

Before we dive into Ajax examples, let’s create a simple server to handle our requests. Save the following code as server.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


// Usage: save this code as server.js and run "node server.js [port]"
import http from 'http';
import fs from 'fs';

// Get the port from command-line arguments
const port = process.argv[2] || 3000;

const requestListener = (request, response) => {
 console.log(request.url)
 if (request.url === '/' || request.url === '/index.html') {
 // Serve the index.html file
 const filePath = 'index.html';
 fs.readFile(filePath, (err, data) => {
 if (err) {
 response.writeHead(500, { 'Content-Type': 'text/plain' });
 response.end('Error loading index.html');
 } else {
 response.writeHead(200, { 'Content-Type': 'text/html' });
 response.end(data);
 }
 });
 } else if (request.url === '/data1') {
 // Return text for URL '/data1'
 response.writeHead(200, { 'Content-Type': 'text/plain' });
 response.end('This is the response for /data1');
 } else if (request.url === '/data2') {
 // Return text for URL '/data2'
 response.writeHead(200, { 'Content-Type': 'text/plain' });
 response.end('This is the response for /data2');
 } else if (request.url === '/data3') {
 // Return text for URL '/data3'
 response.writeHead(200, { 'Content-Type': 'text/plain' });
 response.end('This is the response for /data3');
 } else {
 response.writeHead(404, { 'Content-Type': 'text/plain' });
 response.end('404 Not Found');
 }
};

// Create and start the server
const server = http.createServer(requestListener);

server.listen(port, () => {
 console.log(`Server is running at http://localhost:${port}`);
});

Interactive Demo of fetch(), XMLHttpRequest and Axios #

The following demo showcases three methods for making Ajax requests. Save the code as index.html to the directory that contains server.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87


<!-- Copy this code and save it as "index.html" -->
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Ajax Demo</title>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
 <h1>Ajax Demo</h1>
 <hr />
 <h2>Use fetch()</h2>
 <button onclick="LoadDataFetch('/data1')">Load data 1 (fetch)</button>
 <button onclick="LoadDataFetch('/data2')">Load data 2 (fetch)</button>
 <button onclick="LoadDataFetch('/data3')">Load data 3 (fetch)</button>
 <button onclick="LoadDataFetch('/data4')">Load data 4 (fetch, 404)</button>
 <h2>Use XMLHttpRequest</h2>
 <button onclick="LoadDataXHR('/data1')">Load data 1 (XHR)</button>
 <button onclick="LoadDataXHR('/data2')">Load data 2 (XHR)</button>
 <button onclick="LoadDataXHR('/data3')">Load data 3 (XHR)</button>
 <button onclick="LoadDataXHR('/data4')">Load data 4 (XHR, 404)</button>
 <h2>Use Axios</h2>
 <button onclick="LoadDataAxios('/data1')">Load data 1 (Axios)</button>
 <button onclick="LoadDataAxios('/data2')">Load data 2 (Axios)</button>
 <button onclick="LoadDataAxios('/data3')">Load data 3 (Axios)</button>
 <button onclick="LoadDataAxios('/data4')">Load data 4 (Axios, 404)</button>
 <h2>Data</h2>
 <p id="response">No data loaded</p>
 <script>
 const responseElement = document.querySelector("#response");
 // Fetches data using fetch()
 const LoadDataFetch = (url) => {
 fetch(url)
 .then((response) => {
 // Check if the response status is OK (200-299)
 if (!response.ok) {
 return `HTTP error: ${response.status}`;
 }
 return response.text(); // Return the response data as text
 })
 .then((data) => {
 // Display the data
 responseElement.textContent = data;
 })
 .catch((error) => {
 // Handle errors, e.g., network issues
 responseElement.textContent = "Request failed (fetch)";
 });
 };

 const LoadDataXHR = (url) => {
 const xhr = new XMLHttpRequest();
 xhr.open("GET", url);
 xhr.onreadystatechange = () => {
 // Check if the response status is 200
 if (xhr.readyState === 4 && xhr.status === 200) {
 // Display the data
 responseElement.textContent = xhr.responseText;
 } else {
 responseElement.textContent = `HTTP error: ${xhr.status}`;
 }
 };
 xhr.onerror = () => {
 // Handle errors, e.g., network issues
 responseElement.textContent = "Request failed (XHR)";
 };
 xhr.send();
 };
 const LoadDataAxios = (url) => {
 axios
 .get(url)
 .then((response) => {
 // Display the data
 responseElement.textContent = response.data;
 })
 .catch((error) => {
 // Handle errors, e.g., 404 and network issues
 responseElement.textContent = `Request failed (Axios): ${error.message}`; // Offline, 404
 });
 };
 </script>
</body>

</html>

Run node server.js, and visit http://localhost:3000/. The demo provides buttons to load data from different URLs using three methods: fetch(), XMLHttpRequest and Axios. Try clicking the buttons to see how each method handles requests, including error responses.

Reference #

Prototype and Inheritance in JavaScript

Wed, 02 Oct 2024 00:00:00 +0800

Prototype #

In JavaScript, every object has a hidden built-in property called prototype ([[Prototype]] in ECMAScript Specification and Chrome, <prototype> in Firefox), which is an object. With prototypes, we can create shared properties. To get or set [[Prototype]], use Object.getPrototypeOf() and Object.setPrototypeOf(). __proto__ is a non-standard getter/setter of [[Prototype]], but it’s implemented by many JavaScript engines.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


const fruit = {
 eatable: true,
}

const apple = {
 shape: "round",
 __proto__: fruit, // set [[Prototype]] as fruit
}
console.log(apple.__proto__) // { eatable: true }
console.log(apple.shape) // round, own property
console.log(apple.eatable) // true, inherit from [[Prototype]]
console.log(apple.requireCooking) // undefined, not exist in apple or fruit
fruit.requireCooking = false // add a property to [[Prototype]]
console.log(apple.requireCooking) // false, inherit from [[Prototype]]

const banana = {
 shape: "long and curved",
}
Object.setPrototypeOf(banana, fruit) // set [[Prototype]] as fruit
console.log(Object.getPrototypeOf(banana)) // { eatable: true, requireCooking: false } 
console.log(banana.eatable) // true, inherit from [[Prototype]]

Prototype Chain / Inheritance #

An object has a prototype and its prototype also has a prototype. All these prototypes are called the prototype chain. The last prototype’s prototype is null. An object can inherit properties from multiple prototypes in the prototype chain. When a property is accessed, the object is first checked. If the property is not found, check every prototype in the prototype chain until the property is found. If the property is not found at the end, undefined is returned.

In the apple example, the prototype chain of apple is:

1

apple -> fruit -> Object.prototype -> null

The code below demonstrates the prototype chain:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


const fruit = {
 eatable: true,
}
const apple = {
 shape: "round",
 __proto__: fruit,
}
// fruit
console.log(apple.__proto__) // { eatable: true }
console.log(apple.__proto__ === fruit) // true
// Object.prototype
console.log(apple.__proto__.__proto__) // { … }
console.log(apple.__proto__.__proto__ === Object.prototype) // true
// null
console.log(apple.__proto__.__proto__.__proto__) // null

Test #

Prototypal inheritance#tasks - javascript.info

JavaScript Data Types

Sat, 28 Sep 2024 00:00:00 +0800

JavaScript has 8 data types:

Undefined (undefined)
Null (null)
Boolean (true / false)
Number
BigInt
String
Symbol (unique value)
Object

Object is the only mutable type. Other types are immutable and are called primitive types.

Undefined #

The Undefined type has only one value: undefined, which means a variable is declared but no value is assigned to it.

1
2


let name;
console.log(name); // undefined

undefined can be assigned to a variable but one should use null to represent emptiness.

1
2
3
4


let name = "Kate";
console.log(name) // Kate
name = undefined;
console.log(name); // undefined

Null #

The Null type has only one value: null, which means empty.

1
2


let name = null;
console.log(name); // null

Boolean #

The Boolean type has two values: true and false. The Boolean values are usually used in conditional operations.

1
2
3
4
5
6


console.log(1 > 2); // false
if (1 > 2) {
 console.log("One is greater than two."); // not executed
} else {
 console.log("One is less than two."); // executed
}

Number #

The Number type represents both integer and floating point numbers.

1
2
3


let num;
num = 10;
num = 10.1;

The Number type contains some special values: Infinity, -Infinity and NaN (Not a Number).

1
2
3
4


console.log(10 / 0); // Infinity
console.log(-10 / 0); // -Infinity
console.log(10 / 'a'); // NaN
console.log(NaN === NaN); // false

JavaScript can only safely store integers in the range of Number.MIN_SAFE_INTEGER -(2⁵³ − 1) to Number.MAX_SAFE_INTEGER (2⁵³ − 1).

1
2
3
4


console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MAX_SAFE_INTEGER + 1); // 9007199254740992
console.log(Number.MAX_SAFE_INTEGER + 2); // 9007199254740992
console.log(Number.MAX_SAFE_INTEGER + 3); // 9007199254740994

BigInt #

The BigInt type can safely store integers beyond Number.MIN_SAFE_INTEGER and Number.MAX_SAFE_INTEGER. To create a BigInt value, append n to an integer or call the BigInt() function. Note that when BigInt() accept a number beyond the safe limits, the number will be rounded.

1
2
3
4
5
6


console.log(9007199254740991); // 9007199254740991
console.log(9007199254740992); // 9007199254740992
console.log(9007199254740993); // 9007199254740992, number is rounded
console.log(9007199254740993n); // 9007199254740993n
console.log(BigInt(9007199254740993)); // 9007199254740992n, number is rounded
console.log(BigInt("9007199254740993")); // 9007199254740993n

String #

The String type represents text.

1
2
3
4
5
6


const firstName = "Jane";
const lastName = "Doe";
const fullName = firstName + " " + lastName;
console.log(fullName); // Jane Doe
const selfIntroduction = `Hi, I am ${fullName}.`;
console.log(selfIntroduction); // Hi, I am Jane Doe.

Symbol #

The Symbol type represents a unique and immutable value. To create a Symbol value, call Symbol() function with an optional string as its description.

1
2
3
4
5


const sym1 = Symbol();
const sym2 = Symbol("foo");
const sym3 = Symbol("foo");
console.log(sym1 === sym2); // false
console.log(sym2 === sym3); // false

Object #

Object is a collection of key-value pairs, similar to a dictionary.

1
2
3
4
5


const englishDictionary = {
 article: "A piece of writing",
 happy: "Feeling or showing pleasure",
 water: "Clear and tasteless liquid, essential for life"
}

References #

box-sizing in CSS: How Width and Height Are Calculated

Tue, 24 Sep 2024 00:00:00 +0800

In CSS, a block element is a box (rectangle) made up of four parts: content, padding, border, and margin. box-sizing determines how total width and height of an element is calculated.

Box model

By default (box-sizing: content-box;), the width property only sets the width of content, which is very unintuitive. When you set width: 100% and border to a element, it becomes wider than the parent element and its border extends beyond the parent element.

1
2
3


<div class="container">Parent
 <div class="child">Child</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.container {
 width: 100px;
 height: 100px;
 outline: 1px solid green;
}
.child {
 width: 100%;
 border: 10px solid blue;
 box-sizing: content-box;
}

If we use box-sizing: border-box on the child element, the width property sets the width of content, padding and border, so the child element won’t be wider than the parent element.

It’s recommended to set border-box to all elements to avoid pitfalls about width and height.

1
2
3


*, *::before, *::after {
 box-sizing: border-box;
}

Introduction to Cascade in CSS

Mon, 23 Sep 2024 00:00:00 +0800

The cascade is the algorithm that determines the correct rule when multiple CSS rules apply to an HTML element.

The cascade is determined by several factors (from least important to most important):

source order (least important)
specificity
1. type
2. class
3. id
inline styles
!important (most important)

Source order #

Later declared rules override previous rules.

1

<p>Hello, world!</p>

1
2
3
4
5
6
7


p {
 color: green;
}
p {
 /* This rule wins */
 color: blue;
}

Specificity #

Specificity determines the importance of a selector. In general, the more specific a selector is, the more weight is has.

For example, an id selector is more specific than a type selector, so the id selector has more weight.

1

<p id="p">Hello, world!</p>

1
2
3
4
5
6
7


#p {
 /* This rule wins */
 color: green;
}
p {
 color: blue;
}

Specificity calculation #

The specificity score is calculated using three components:

A = the number of ID selectors
B = the number of class selectors, attribute selectors and pseudo-classes
C = the number of type selectors and pseudo-elements

Specificity scores are compared by comparing three components in order. The specificity score with a larger A value is higher. If two A values are equal, compare B values. If two B values are also equal, compare C values. If all values are equal, two specificity scores are equal. For example, (1,0,0) is larger than (0,2,0).

When you inspect an element using devtools and hover the cursor to a selector of a style declaration, you will see the specificity score in the form of Specificity: (A,B,C).

Here are some specificity score examples:

Selector	A (ID)	B (Class)	C (Type)	Score
`*`	0	0	0	0,0,0
`p`	0	0	1	0,0,1
`div.highlight`	0	1	1	0,1,1
`main .table-wrapper > table`	0	1	2	0,1,2
`#avatar`	1	0	0	1,0,0

Inline styles #

Inline styles are declared inside a style attribute. Inline styles have the highest specificity score (1,0,0,0).

1

<p style="color: blue;" id="p">I am blue</p>

1
2
3


#p {
 color: green;
}

!important #

!important flag overrides all other factors (source order, specificity, and inline styles).

1

<p style="color: blue;" id="p">I am green</p>

1
2
3


#p {
 color: green !important;
}

!important can make CSS work unexpectedly. Don’t use it unless you really need it.

References #

Test #

Test your skills: The Cascade - Learn web development | MDN

Introduction to Inheritance in CSS

Mon, 23 Sep 2024 00:00:00 +0800

Elements inherit some CSS properties from their ancestors. You can check whether a property is inherited in the formal definition section on MDN, e.g. width and color.

1
2
3
4
5


<div class="grandparent">
 <div class="parent">
 <div class="child">I inherit the green color from my parent, and the italic style from my grandparent. I don't inherit the border.</div>
 </div>
</div>

1
2
3
4
5
6
7


.grandparent {
 font-style: italic;
 border: 2px solid black; /* not inherited */
}
.parent {
 color: green; 
}

CSS provides five universal property values to control inheritance.

The CSS shorthand property all applies one of these values to all properties of an element.

What Is Block Formatting Context (BFC) in CSS

Sun, 22 Sep 2024 00:00:00 +0800

Block Formatting Context (BFC) is a mini layout in the page. When an element establishes a BFC, it:

includes internal floated elements
exclude external floated elements
suppresses margin collapsing

A BFC is created in many situations, see Block formatting context - CSS: Cascading Style Sheets | MDN. The simplest way to create a BFC is display: flow-root.

Here is an example of excluding external floated elements (live preview):

1
2
3
4
5
6
7
8
9


<div class="container">
 <div class="float">I am floated element.</div>
 <div class="content">I am content inside the container. I include the floated element.</div>
</div>
<hr>
<div class="container">
 <div class="float">I am floated element.</div>
 <div class="content flow-root">I am content inside the container. I have a BFC. I exclude the floated elements.</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


.float {
 float: left;
 border: 5px solid green;
}

.content {
 border: 5px solid blue;
}

.container {
 border: 5px solid red;
}

.content.flow-root {
 display: flow-root;
}

What Is Clearfix in CSS

Sun, 22 Sep 2024 00:00:00 +0800

Float can be used to lay out elements. Clearfix is a method used to fix the zero-height container issue caused by floated elements.

Here is an example of arranging items vertically using float (live preview):

1
2
3
4
5
6


<div class="container clearfix">
 <div class="item item1">item1</div>
 <div class="item item2">item2</div>
 <div class="item item3">item3</div>
</div>
<div class="outer">outer element</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.item {
 border: 1px solid red;
 width: 60px;
 height: 60px;
 float: left;
}

.container {
 border: 1px solid green;
}

Three items are properly arranged, but the outer element is at the right side of item3.

1

item1 | item2 | item3 | outer element

The outer element should be under all items.

1
2
3


item1 | item2 | item3 |

outer element

Since three items are floated, they are removed from the normal flow. As a result, .container contains nothing, so its height is 0. That’s why the outer element isn’t under three items. Here is the classic method for fixing the height:

1
2
3
4
5


.clearfix::after {
 content: '';
 display: block;
 clear: both;
}

Breakdown:

.clearfix::after creates an element and append it to .clearfix (.container)
content: ''; means the element is empty.
display: block; means the element is a block element.
clear: both; puts the element under left floated elements and right floated elements.
Since .clearfix (.container) has an element now, its height becomes normal.
You can see the element by applying content: 'hi'.

The classic method is obsolete and difficult to understand. Here is the modern and simpler method:

1
2
3


.clearfix {
 display: flow-root;
}

display: flow-root makes the container establish a block formatting context, which contains internal floated elements. For more details on block formatting context, see What is Block Formatting Context (BFC) in CSS.

Note that float layout is hacky and obsolete. Use flexbox or grid instead.

What Is Margin Collapsing in CSS

Sat, 21 Sep 2024 00:00:00 +0800

Margin collapsing is a feature in the flow layout. When an block element comes after another block elements, the bottom margin of the upper element and the top margin of the lower element collapse (merge into a single margin). The larger margin remains, and the smaller margin disappears. If the two margins are equal, one of them remains. Margins don’t collapse in a flex container or a grid container.

Example (live preview):

1
2
3
4
5


<!-- Margin collapsing example -->
<div class="container">
 <p class="upper">Upper element</p>
 <p class="lower">Lower element</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


p {
 /* Remove default margins */
 margin: 0;
}

.upper {
 /* Larger margin remains */
 margin-block-end: 50px;
}

.lower {
 /* Smaller margin disappears */
 margin-block-start: 10px;
}

.container {
 border: 1px solid purple;
 /* Margins don't collapse in the flex layout or grid layout */
 /* display: grid; */
}

p {
 border: 1px solid green;
}

The bottom margin of the upper element (50px) is larger, so it remains and another margin (10px) disappears. When we add display: grid; to the container, <p> elements become grid items, which establish block formatting contexts, so margin collapsing is disabled. Now you can see the two margins exist at the same time.

For more details on block formatting context, see What is Block Formatting Context (BFC) in CSS.

Further reading: Mastering margin collapsing - CSS: Cascading Style Sheets | MDN

Add a Horizontal Scrollbar to a Table with CSS

Fri, 20 Sep 2024 00:00:00 +0800

Tables with many columns can overflow the page width, which distorts the page layout. Adding a horizontal scrollbar avoids this problem.

To add a horizontal scrollbar to a table, wrap the table in a <div> container and apply overflow-x: auto; to the container.

1
2
3
4
5


<div style="overflow-x: auto;"> <!-- Wrapper -->
 <table>
 <!-- Table content -->
 </table>
</div>

Demo (live preview):

1
2
3


.table-wrapper {
 overflow-x: auto;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92


<div class="table-wrapper">
 <table>
 <thead>
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 <th>Header 3</th>
 <th>Header 4</th>
 <th>Header 5</th>
 <th>Header 6</th>
 <th>Header 7</th>
 <th>Header 8</th>
 <th>Header 9</th>
 <th>Header 10</th>
 <th>Header 11</th>
 <th>Header 12</th>
 <th>Header 13</th>
 <th>Header 14</th>
 <th>Header 15</th>
 <th>Header 16</th>
 <th>Header 17</th>
 <th>Header 18</th>
 <th>Header 19</th>
 <th>Header 20</th>
 <th>Header 21</th>
 <th>Header 22</th>
 <th>Header 23</th>
 <th>Header 24</th>
 <th>Header 25</th>
 <th>Header 26</th>
 <th>Header 27</th>
 <th>Header 28</th>
 <th>Header 29</th>
 <th>Header 30</th>
 <th>Header 31</th>
 <th>Header 32</th>
 <th>Header 33</th>
 <th>Header 34</th>
 <th>Header 35</th>
 <th>Header 36</th>
 <th>Header 37</th>
 <th>Header 38</th>
 <th>Header 39</th>
 <th>Header 40</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Data 1</td>
 <td>Data 2</td>
 <td>Data 3</td>
 <td>Data 4</td>
 <td>Data 5</td>
 <td>Data 6</td>
 <td>Data 7</td>
 <td>Data 8</td>
 <td>Data 9</td>
 <td>Data 10</td>
 <td>Data 11</td>
 <td>Data 12</td>
 <td>Data 13</td>
 <td>Data 14</td>
 <td>Data 15</td>
 <td>Data 16</td>
 <td>Data 17</td>
 <td>Data 18</td>
 <td>Data 19</td>
 <td>Data 20</td>
 <td>Data 21</td>
 <td>Data 22</td>
 <td>Data 23</td>
 <td>Data 24</td>
 <td>Data 25</td>
 <td>Data 26</td>
 <td>Data 27</td>
 <td>Data 28</td>
 <td>Data 29</td>
 <td>Data 30</td>
 <td>Data 31</td>
 <td>Data 32</td>
 <td>Data 33</td>
 <td>Data 34</td>
 <td>Data 35</td>
 <td>Data 36</td>
 <td>Data 37</td>
 <td>Data 38</td>
 <td>Data 39</td>
 <td>Data 40</td>
 </tr>
 </tbody>
 </table>
</div>

Introduction to CSS BEM Naming Convention

Sun, 08 Sep 2024 00:00:00 +0800

BEM (Block, Element, Modifier) is a naming convention for class names in HTML and CSS. It makes HTML and CSS code more orgranized.

Concepts and Usage #

Don’t worry if you don’t understand it at first. There are examples later on.

Block: independent HTML element (such as <nav>), and it may not contain any HTML elements.
Element: any HTML element inside a block, it can’t be independently used (example: <li>), and double underscores __ should be added before it.
Modifier: it indicates the state or appearance of a block or element, and double hyphens -- should be added before it.
Use single hyphen to connect words, example: search-form.
An element only belongs to a block, not another element. Wrong: block__element1__element2. Correct: block__element2.
When using modifier, keep the class name without the modifier. Example: <a class="menu__link menu__link--active" href="/en/">Home</a>.

HTML Demo #

<nav> is a block, which contains the elements <ul>, <li> and <a>. --active is a modifier.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<nav class="menu">
 <ul class="menu__list">
 <li class="menu__item">
 <a class="menu__link menu__link--active" href="/en/">Home</a>
 </li>
 <li class="menu__item">
 <a class="menu__link" href="/en/posts/">Posts</a>
 </li>
 <li class="menu__item">
 <a class="menu__link" href="/en/about/">About</a>
 </li>
 </ul>
</nav>

CSS Demo #

Online demo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Horizontal list */
.menu__list {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 list-style-type: none;
 padding-inline-start: 0;
}

/* Embolden the link that matches the current page */
.menu__link--active {
 font-weight: bolder;
}

SCSS Demo #

I strongly recommend SCSS because you can use the parent selector & to group together all styles of both a block and its elements. This structure clearly reflects the hierarchical relationship between them.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


.menu {
 // Horizontal list
 &__list {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 list-style-type: none;
 padding-inline-start: 0;
 }

 // Embolden the link that matches the current page
 &__link {
 &--active {
 font-weight: bolder;
 }
 }
}

Alternative: Atomic CSS #

If you find BEM too verbose or difficult to maintain, you can try atomic CSS frameworks like Tailwind CSS and UnoCSS that provide utilities (predefined classes). Developers only need to write predefined class names and don’t need to write CSS code. Here are some utilities in Tailwind CSS:

1
2
3
4
5
6


.flex {
 display: flex;
}
.flex-row {
 flex-direction: row;
}

To rewrite the previous CSS code in Tailwind CSS (online demo):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<script src="https://cdn.tailwindcss.com"></script>
<script>
 tailwind.config = {
 corePlugins: {
 preflight: false,
 }
 }
</script>
<nav>
 <ul class="flex flex-row flex-wrap justify-between list-none ps-0">
 <li>
 <a class="font-bold" href="/en/">Home</a>
 </li>
 <li>
 <a href="/en/posts/">Posts</a>
 </li>
 <li>
 <a href="/en/about/">About</a>
 </li>
 </ul>
</nav>

Web on Cyrus Yip's blog

What Is HTTP

Introduction #

HTTP Request #

HTTP Request Methods #

HTTP Response #

HTTP Status Codes #

References #

What Is Ajax and How to Use it

Set Up a Test Server #

Interactive Demo of fetch(), XMLHttpRequest and Axios #

Reference #

Prototype and Inheritance in JavaScript

Prototype #

Prototype Chain / Inheritance #

Further Reading #

Test #

JavaScript Data Types

Undefined #

Null #

Boolean #

Number #

BigInt #

String #

Symbol #

Object #

References #

box-sizing in CSS: How Width and Height Are Calculated

Introduction to Cascade in CSS

Source order #

Specificity #

Specificity calculation #

Inline styles #

!important #

References #

Further reading #

Test #

Introduction to Inheritance in CSS

What Is Block Formatting Context (BFC) in CSS

What Is Clearfix in CSS

What Is Margin Collapsing in CSS

Add a Horizontal Scrollbar to a Table with CSS

Introduction to CSS BEM Naming Convention

Concepts and Usage #

HTML Demo #

CSS Demo #

SCSS Demo #

Alternative: Atomic CSS #

Further Reading #