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. nav li { opacity: 0.5; } Assign a page‑specific class to the body element (e.g., class="home" or class="buy") and give each li a matching class.
<!-- home.html -->
<body class="home"></body>
<!-- buy.html -->
<body class="buy"></body>li.home { opacity: 0.5; }
li.buy { opacity: 0.5; }body.home nav li.home,
body.buy nav li.buy { opacity: 1; }When the page is home, the rule body.home nav li.home makes the home navigation item opaque, highlighting it.
The same result can be achieved on hover with the :hover selector:
nav li:hover { opacity: 1; }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.
.menu { display: none; }
.user:hover + .menu { display: list-item; }
.menu:hover { display: list-item; }Adjacent sibling selectors ( +) and the :hover pseudo‑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 :checked pseudo‑class allows custom appearances.
input[type=checkbox] { display: none; }
input[type=checkbox]:checked + .checkbox { /* custom checked style */ }Wrap the hidden input and a styled span inside a label so 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: table on the container and display: table-cell on each column, which naturally equalizes heights.
.wrapper { display: table; border-spacing: 20px; }
.wrapper > div { display: table-cell; width: 1000px; border-radius: 5px; }Media queries can switch the layout to block on small screens.
@media (max-width: 500px) {
.wrapper { display: block; }
.wrapper > div { display: block; width: 100%; }
}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.
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%; }6. Form Submission Without JavaScript
A simple form element can send data to a search results page, avoiding any JavaScript.
<form id="search-form" action="/search">
<input type="search" name="keyword">
<input type="number" name="price">
</form>All input names become query parameters when the form is submitted.
7. Automatic Enter‑Key Handling
Placing inputs inside a form enables the browser to submit on Enter automatically, removing the need for a keypress listener.
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.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
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.