Source from repo

User Interface Wiki

Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.

raphaelsalajaGitHub raphaelsalajaSource repo Original GitHub link Publisher page

Files

157

Skill

n/a

Size

184.3 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

rules/pseudo-over-dom-node.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown33 linesFree

rules/pseudo-over-dom-node.md

1---
2title: Pseudo-Elements Over DOM Nodes
3impact: MEDIUM
4tags: pseudo, dom, decorative
5---
6 
7## Pseudo-Elements Over DOM Nodes
8 
9Use pseudo-elements for decorative content instead of extra DOM nodes.
10 
11**Incorrect (extra DOM node):**
12 
13```tsx
14<button className={styles.button}>
15  <span className={styles.background} />
16  Click me
17</button>
18```
19 
20**Correct (pseudo-element):**
21 
22```tsx
23<button className={styles.button}>
24  Click me
25</button>
26```
27```css
28.button::before {
29  content: "";
30  /* decorative background */
31}
32```
33

Preparing the source view

User Interface Wiki

rules/pseudo-over-dom-node.md