Mrinalini Sugosh (Mrina) for TinyMCE

Posted on Oct 17 • Edited on Oct 18

5 Essential HTML and CSS Tricks to Ditch JavaScript

#webdev #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 `<datalist>`

Autocomplete functionality is often done with a library or custom JavaScript. But with HTML’s <datalist> element, you can create an auto-suggest input with minimal effort.

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 <datalist> provides a list of suggestions when the user starts typing in the text input. No need for JavaScript-based autocomplete libraries.

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 `<details>` and `<summary>`

Accordion menus are often built with JavaScript to toggle visibility of content. But HTML provides the <details> and <summary> 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!

Top comments (15)

Eckehard • Oct 17

HTML is just one way to build the DOM, you can do the same using the HTML-DOM-API with Javascript. Or use one of the modern frameworks like React or Svelte, which - under the hood - do exactly this.

Finally it does not really matter how you create the DOM. You may find it convenient to use HTML, but if you create a Javascript heavy library like TinyMCE, this means, you need to maintain all your HTML files along with your Javascript code. So, it might be convenient to build the DOM from within Javascript and ditch HTML completely. This means, you just need to care for your codebase and do not need to keep all the HTML aligned with your code.

Mrinalini Sugosh (Mrina) • Oct 18

Yeah, you make a good point—using JavaScript to directly manage the DOM can definitely help keep everything in sync without worrying about separate HTML files. React and Svelte are great for making DOM updates easier, but they can also add some extra overhead compared to just using the DOM API directly. It really depends on what you’re building—sometimes keeping it lightweight and simple makes more sense, and sometimes the benefits of a framework are worth it for larger projects

Eckehard • Oct 18

We should be happy to have different tools to do the job. Each one has it´s own advantages.

The HTML-DOM-Api is surely a bit awkward, but it is fairly easy to make it more convenient. See this post for example.

Using JS to build the DOM has far more advantages then you might think. You get DOM references directly without using GetElementBy... And you get better access to DOM events. Some time ago I demonstated this for the (TipTap-Editor)[dev.to/efpage/event-based-state-co...].

Davy TISSOT • Oct 18

Very good post!

You forgot to add the "scroll-behavior" property to the third example snippet. Also, <detail> can be a bit complicated. Using multiple <div> elements and a hidden checkbox, like in the switch examples (or JavaScript), is simpler.

Sergio Olivieri • Oct 18

But definitley not accessible.

Davy TISSOT • Oct 19

What do you mean by 'accessible'?

If you're talking about accessible technology, the role attribute can help with that. If you're talking about visual accessibility/ergonomics, using <div> can simplify styling and responsiveness.

I would greatly appreciate it if you could elaborate on your point. Statements that are not explained can be confusing and unhelpful for others who read them. When we share our thoughts and ideas, it's important to provide context and reasoning so that others can understand and learn from our perspectives. This helps to foster a more productive and inclusive discussion.

PS: Sorry if I sounded aggressive or condescending. I sometimes struggle with expressing myself clearly in writing.