Is there any specific reason not to use a short HTML/CSS syntax like <div a b c></div>?

When it comes to writing HTML in less standard environments, such as a phonegap app where strict syntax and semantics are not crucial, I have developed a unique approach that works for me.

I aim to keep my HTML code short and concise by using the following structure:

<i x y z="0"><b a b c></b></i>

This is then styled using CSS like so:

[x]{something}
[y]{something}
[z="0"]{...}
...

Instead of using traditional classes, which I find too complex for my preferences.

The advantages of this method for me include:

  • Efficiency - saves time typing out code
  • Works well with JavaScript for toggling attributes and making styles dependent on values
  • Potential faster processing by machines due to shorter HTML code, but unsure about CSS performance compared to classes. Any insights on this are welcome!
  • Haven't encountered any instances where this approach has failed

I am interested to know if there are any technical or performance-related reasons why this method may not be optimal, excluding concerns about code readability.

javascriptcsshtml

Answer №1

When it comes to invalid attributes in HTML, the spec is silent on what browsers should do. In the worst case scenario, your code will simply fail validation.

Some may think that shorter HTML code is processed faster by machines.

However, attempting to go against the specifications or parser with your code will likely result in slower performance. Browser developers must specially handle non-conforming code due to HTML's backward compatibility requirements. Claiming that making the attribute name shorter makes your code "faster" is baseless and will probably lead to ridicule during a code review session.

Answer №2

When prioritizing convenience over standard compliance in scenarios like a phonegap app

But what happens when an update to phonegap breaks your code because it deviates from standards?

Shorter code may save time initially

However, this can lead to decreased maintainability in the long run. Making changes later on could become difficult as understanding the code becomes more complex.

Is HTML faster to process due to its brevity compared to CSS with classes?

In terms of parsing speed, there likely won't be a significant difference.

A good coding style should prioritize readability to ensure that adding new team members is seamless and understanding the code is straightforward for all involved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Continuously I am being informed that the value is null

Check out this code snippet: var Ribbon = /** @class */ (function () { function Ribbon(svg) { // Code here... } Ribbon.prototype.init = function() { // Initialization code here... }; Ribbon.prototype.updateR ...

javascripthtmlcssnull

Issue with ng-model causing incorrect variable binding

My issue lies with a variable that I have connected to a select input through the use of ng-model. Strangely, the variable seems to not update with the correct data and retains the value assigned to it during initialization. I have a similar setup elsewhe ...

javascripthtmlangularjs

Converting MySQL data to JSON format in PHP, including handling nested objects

Hey there, I'm currently working on organizing these results into arrays in PHP so that I can convert them into JSON objects and send them over to the client. Here is what the query results look like: id name hours cat status 3bf JFK Int 24 ...

phpjavascriptmysqljsonrest

Obtaining a result from a switch statement

Here is a solution to populate the generated drop-down menu: $('dropdown_options').innerHTML = '&nbsp;'; jsonResponse.forEach(function(element){ $('dropdown_options').innerHTML += '<option value='+ elemen ...

javascriptjqueryajax

Can I create a div with a rounded right side?

Is there a way to give a div a slightly rounded right side using CSS? If so, can you show me how in this fiddle template: http://jsfiddle.net/z2hejemu/ HTML <div class="rounded-side"> <p>By default, this div is rectangular. I would like t ...

htmlcss

What causes jquery to not trigger PHP when the HTML file resides in a different location?

In my project structure, I have a 'js' folder containing the jQuery function and a PHP script. The HTML file is located in a separate folder. Currently, the setup looks like this: /server/js/global.js /server/js/script.php /server/html/stude ...

phpjqueryhtmlhyperlink

How can I ensure that these input fields line up perfectly with this image, eliminating any gaps in between?

I am looking to add MAP PO and choose the status directly underneath the input fields above, with no empty space in between. The image is causing a disruption in the continuity of the flow. Here is the image: https://i.sstatic.net/pHnfJ.png ...

csslayoutbootstrap-4

Is there a way to utilize JavaScript or jQuery to modify the background color of the `Save` and `Cancel` buttons within a SharePoint 2013 edit form?

Is there a way to modify the background color of the Save and Cancel buttons on a SharePoint 2013 edit form using JavaScript or jQuery? ...

javascriptjquerysharepointsharepoint-2013

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

Just starting out with Angular and curious about the alternative for $filter('orderBy') that is used in an AngularJS controller. AngularJS example: $scope.itemsSorted = $filter('orderBy')($scope.newFilteredData, 'page_index&apos ...

javascriptangulartypescriptangular8

choose image for select box background

Similar Question: Background Image for Select (dropdown) does not work in Chrome I am trying to update the background image of a select box to https://www.google.com/images/nav_logo101.png Currently, I am using the following code: <form> & ...

htmlcss

Encountering issue with jQuery - Ajax causing error 500 for select posts

Recently, I encountered an issue with the Ajax functionality on a live website. It was previously working perfectly fine, but suddenly started returning a 500 internal server error instead of the expected page. Oddly enough, I discovered that I could stil ...

javascriptjqueryajaxcakephppost

Embracing the beauty of incorporating nested quotations

I've been experimenting with jquery's append functions lately. I'm adding a substantial amount of html, specifically a button with an onclick event function. It might sound complicated, but due to some technical restrictions, this is my onl ...

javascriptjquery

Limit the amount of text displayed on the main section of the webpage

I am working on creating a simple webpage with three different sections styled like this: .top { position:absolute; left:0; right:0; height: 80px; } .left { position:absolute; ...

htmlcsssections

Applying ngClass to handle positive and negative numbers and adjust color in Ionic/Capacitor

I have data from my API that includes price and percentage data. I want to display negative numbers in red, and zero or positive numbers in green. After exploring Angular documentation, I found that ngStyle and ngClass can be used for this purpose. I chose ...

androidhtmlcssangularionic-framework

Arranging a JSON array based on the numerical value within an object

I am interested in sorting an array from a json file based on distances calculated using the haversine library. The purpose is to find geolocations near a specified value and display the closest results first. function map(position){ var obj, ...

javascriptjsonsortingobjectnumeric

What is the best way to use an object as a key to filter an array of objects in JavaScript?

My data consists of an array of objects: let allData = [ {title:"Adams",age:24,gender:"male"}, {title:"Baker",age:24,gender:"female"}, {title:"Clark",age:23,gender:"male"}, {title:"Da ...

javascriptarraysfilter

Struggling with the nested array of objects

I have utilized Mongodb aggregation and used the $facet operator to count each value of "reli" and "prov" from the collection. Here is the code I used to retrieve results from the database: const keyy = await db.aggregate([ $facet: { "reli": [ { $group ...

javascriptarraysmongodb

What steps can be taken to resolve the issue with Angular routing?

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {HomeComponent} from "./home/home.component"; import {SettingsComponent} from "./settings/settings.component"; ...

javascriptnode.jsangular

Ways to showcase an item within additional items?

I'm struggling to properly display data in a table. My goal is to iterate through an object within another object inside an array and showcase the source, accountId, name, and sourceId in the table. https://i.sstatic.net/VVIuc.png <tbody clas ...

javascriptvue.jsvuejs2

Ensuring the footer stays anchored at the bottom using Material-UI Expansion Drawers

Utilizing Material-UI@next in my React application, I have a component that showcases a list of items using Expansion Panels. Additionally, there is a straightforward <Footer /> component structured like this: import React, { Component } from "react ...

cssreactjsmaterial-ui