Why Use Pure HTML/CSS Over JavaScript? 7 Practical Techniques
This article explains why simple HTML/CSS solutions are often preferable to JavaScript, and demonstrates seven practical techniques—including navigation highlighting, hover‑based menus, custom form controls, equal‑height columns, dynamic item layouts, form submission, and automatic Enter‑key handling—each with clean code examples.
1. Navigation Highlight
Instead of using JavaScript to highlight the current navigation item, a small amount of CSS can achieve the same effect with faster development and lower maintenance.
<code>nav li { opacity: 0.5; }</code>Assign a page‑specific class to the
bodyelement (e.g.,
class="home"or
class="buy") and give each
lia matching class.
<code><!-- home.html -->
<body class="home"></body>
<!-- buy.html -->
<body class="buy"></body></code><code>li.home { opacity: 0.5; }
li.buy { opacity: 0.5; }</code><code>body.home nav li.home,
body.buy nav li.buy { opacity: 1; }</code>When the page is
home, the rule
body.home nav li.homemakes the home navigation item opaque, highlighting it.
The same result can be achieved on hover with the
:hoverselector:
<code>nav li:hover { opacity: 1; }</code>2. Hover‑Based Display
Common UI patterns such as dropdown menus can be shown on hover using CSS only. The menu is hidden by default and displayed when the preceding element is hovered.
<code>.menu { display: none; }
.user:hover + .menu { display: list-item; }
.menu:hover { display: list-item; }</code>Adjacent sibling selectors (
+) and the
:hoverpseudo‑class make the submenu appear without any JavaScript.
3. Custom Radio/Checkbox Styles
Native radio and checkbox controls cannot be styled directly, but CSS 3’s
:checkedpseudo‑class allows custom appearances.
<code>input[type=checkbox] { display: none; }
input[type=checkbox]:checked + .checkbox { /* custom checked style */ }</code>Wrap the hidden input and a styled
spaninside a
labelso clicking the span toggles the checkbox.
4. Multi‑Column Equal Height
Two CSS‑only solutions are presented:
Use a large bottom padding with a negative margin to force equal height.
Use
display: tableon the container and
display: table-cellon each column, which naturally equalizes heights.
<code>.wrapper { display: table; border-spacing: 20px; }
.wrapper > div { display: table-cell; width: 1000px; border-radius: 5px; }</code>Media queries can switch the layout to block on small screens.
<code>@media (max-width: 500px) {
.wrapper { display: block; }
.wrapper > div { display: block; width: 100%; }
}</code>5. Vary Style by Item Count
CSS selectors can adjust the width of list items based on how many are present, eliminating the need for JavaScript calculations.
<code>li { width: 100%; }
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li { width: 50%; }
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li { width: 33%; }</code>6. Form Submission Without JavaScript
A simple
formelement can send data to a search results page, avoiding any JavaScript.
<code><form id="search-form" action="/search">
<input type="search" name="keyword">
<input type="number" name="price">
</form></code>All input names become query parameters when the form is submitted.
7. Automatic Enter‑Key Handling
Placing inputs inside a
formenables the browser to submit on Enter automatically, removing the need for a
keypresslistener.
Using semantic HTML elements (forms, inputs, labels) lets the browser handle many interactions efficiently, demonstrating that the right tool for the job often simplifies development.
Tencent IMWeb Frontend Team
IMWeb Frontend Community gathering frontend development enthusiasts. Follow us for refined live courses by top experts, cutting‑edge technical posts, and to sharpen your frontend skills.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.