擺脫 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

and

elements that give us this functionality with no extra code.

Github Repo

HTML

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

CSS

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;
}

This simple markup gives us an interactive, accessible accordion that can open and close, without needing any JavaScript.

Why This Is Better:

• Native: It’s a browser feature, so it’s faster and more reliable.
• ** Accessible:** The browser handles focus management and interaction patterns for you.

Example 5: Scroll-Triggered Animations with CSS

Animating elements based on scroll position is often done with JavaScript libraries. But with the scroll-margin property and scroll-behavior CSS, you can create smoother, more accessible animations.

Github Repo

HTML

<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>

CSS

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);
}

Why This Is Better

• No JavaScript required: You can achieve smooth scroll-triggered animations with just CSS.
• Performance: Animations are handled natively by the browser, leading to smoother, more efficient transitions without the complexity of JavaScript.
• Simpler to maintain: Using CSS reduces the need for complex JavaScript scroll-tracking logic, making the code easier to update and maintain.

There are plenty of cases where you can avoid the complexity of JavaScript entirely by using native browser features and clever CSS tricks.

As we see the rise of AI assistants in coding and Chat-Oriented Programming, the ability to adopt and enforce simpler, declarative solutions like HTML and CSS becomes even more crucial. AI tools can generate javascript code quickly, but leveraging HTML and CSS for core functionality ensures that the code remains maintainable and easy to understand, both by humans and AI. By using the least powerful solution for the job, you not only make your code more accessible but also enable AI to assist in a more efficient and optimized way.

HTML and CSS provide powerful tools for building interactive, accessible, and responsive web components—without the need for heavy JavaScript. So next time you’re tempted to reach for JavaScript, take a moment to consider if a simpler solution using HTML and CSS might work just as well, or even better.

Check out the Github repository for all the examples in the article. Also, check out the TinyMCE blog for insights, best practices, and tutorials, or start your journey with TinyMCE by signing up for a 14-day free trial today.

Happy coding!

以上是擺脫 JavaScript 的基本 HTML 與 CSS 技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！