摆脱 JavaScript 的基本 HTML 和 CSS 技巧

Let’s talk about when not to use JavaScript and why HTML and CSS can often be the better tools for the job. This might sound counterintuitive—especially coming from a Javascript Developer—but it’ll make sense by the end, trust me!

I’m not anti-JavaScript. I write in it all day long for a Rich Text Editor. But over time, I’ve found that by using HTML and CSS for many tasks, I can actually make my code simpler, more maintainable, and often more performant. This approach is rooted in a core web development principle known as the rule of least power.

The Rule of Least Power

The rule of least power is simple: use the least powerful language suitable for the task. In web development, this means using HTML over CSS, and CSS over JavaScript wherever possible. The logic here is that:

• HTML is declarative and lightweight, great for structuring content.
• CSS is also declarative and used for styling, offering many layout and interaction options that don't need JavaScript.
• JavaScript, while powerful, does introduce complexity, performance costs, and potential errors.

So let’s dive into some real-world examples, all of which are available in this GitHub repository, where you might have typically used JavaScript but can achieve better results with just HTML and CSS. These examples demonstrate how you can simplify your code while maintaining functionality and performance.

Example 1: Custom Switches (Checkboxes without JS)

We’ve all built custom switches. Usually, this involves a lot of JavaScript to handle clicks and toggle states. But here’s how you can build a fully functional, accessible switch using just HTML and CSS.

Github Repo

HTML

<label class="switch">
  <input type="checkbox" class="switch-input">
  <span class="switch-slider"></span>
</label>

CSS

/* The outer container for the switch */
.switch { 
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* The hidden checkbox input */
.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The visible slider (background) of the switch */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

/* The circle (slider button) inside the switch */
.switch-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

/* Pseudo-class that styles the switch when the checkbox is checked */
.switch-input:checked + .switch-slider {
  background-color: #2196F3;
}

/* Moves the slider button to the right when the switch is checked */
.switch-input:checked + .switch-slider:before {
  transform: translateX(26px);
}

This setup creates a fully functional switch without JavaScript, leveraging the :checked pseudo-class for styling changes.This pseudo-class targets the element (the checkbox) when it's in the "checked" state. It triggers the style changes for the switch, such as changing the background color and moving the slider button when the checkbox is toggled on.

Why This Is Better:

• No JavaScript needed: Fewer moving parts, fewer chances for bugs.
• Accessible out of the box: You get keyboard and mouse support automatically, making it easier to maintain.

Example 2: Auto Suggest with

Autocomplete functionality is often done with a library or custom JavaScript. But with HTML’s

Github Repo

HTML

<input type="text" list="suggestions" placeholder="Choose an option...">
<datalist id="suggestions">
  <option value="Open AI">
  <option value="Open Source">
  <option value="Open Source Software">
</datalist>

CSS

.container {
  width: 300px; 
  display: block; 
}

input {
  padding: 10px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

Here, the

Why This Is Better:

• Lightweight: It’s built into the browser, so it’s faster and more efficient.
• Simple: No extra JS, dependencies, or complex logic needed.

Example 3: Smooth Scrolling with CSS

In a lot of websites, smooth scrolling on a webpage was handled with jQuery or custom JavaScript functions. But now, we can achieve this with a single line of CSS.

Github Repo

HTML

<nav>
  <a href="#section1">Go to Section 1</a>
  <a href="#section2">Go to Section 2</a>
  <a href="#section3">Go to Section 3</a>
</nav>

<!-- Section 1 -->
<section id="section1">
  <h2>Section 1</h2>
</section>

<!-- Section 2 -->
<section id="section2">
  <h2>Section 2</h2>
</section>

<!-- Section 3 -->
<section id="section3">
  <h2>Section 3</h2>
</section>

CSS

/* Basic styling for sections */
section {
    height: 100vh;
    padding: 20px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Different background colors for each section */
#section1 {
    background-color: lightcoral;
}

#section2 {
    background-color: lightseagreen;
}

#section3 {
    background-color: lightblue;
}

/* Styling for the navigation */
nav {
    position: fixed;
    top: 10px;
    left: 10px;
}

nav a {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    background-color: #333;
    border-radius: 5px;
}

nav a:hover {
    background-color: #555;
}

When a user clicks on a section's anchor link, this ensures that the page scrolls smoothly to that section.

Why This Is Better:

• Less Code: Achieve smooth scrolling with a single line of CSS instead of complex JavaScript, reducing code complexity.
• Improved Performance: Native CSS scrolling is faster and more efficient than JavaScript-based solutions.
• Browser Consistency: CSS ensures smooth scrolling works consistently across browsers and devices.

Example 4: Accordions using

and

Accordion menus are often built with JavaScript to toggle visibility of content. But HTML provides the

<details>
  <summary>Click to toggle</summary>
  <p>This is some content!</p>
</details>

details {
  width: 300px;
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  font-size: 18px;
}

summary {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

details[open] summary {
  color: #2196F3;
}

<body>
     <!-- Navigation with anchor links -->
     <nav style="position:fixed; top:10px; left:10px;">
        <a href="#section1">Section 1</a>
        <a href="#section2">Section 2</a>
        <a href="#section3">Section 3</a>
        <a href="#section4">Section 4</a>
    </nav>

    <!-- Section 1 -->
    <section id="section1">
        <h2>Welcome to Section 1</h2>
    </section>

    <!-- Section 2 -->
    <section id="section2">
        <h2>Welcome to Section 2</h2>
    </section>

    <!-- Section 3 -->
    <section id="section3">
        <h2>Welcome to Section 3</h2>
    </section>

    <!-- Section 4 -->
    <section id="section4">
        <h2>Welcome to Section 4</h2>
    </section>
</body>

html {
    scroll-behavior: smooth;
}

/* Remove body margins */
body {
    margin: 0;
}

/* Full viewport height for sections with centered content */
section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    transition: background-color 0.6s ease-in-out;
}

/* Styling for headings */
section h2 {
    font-size: 36px;
    margin: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    transform: translateY(30px);
}

/* Add margin for scroll snapping */
section:nth-child(odd) {
    background-color: #ffcccb;
}

section:nth-child(even) {
    background-color: #d0e7ff;
}

/* Scroll-triggered animation */
section:target h2 {
    opacity: 1;
    transform: translateY(0);
}