Code Frontend with Emojis?

I agree, using emojis in code as a function name or variable is AWEFUL, maybe one day it might become a convention (C’mon react hooks as a fishing hook is brilliant) but today this is quite an odd idea.

However, when building complex user interfaces, I believe you can use emojies to very easily convey how the code ‘looks’ from within the text, here’s an example:

First of all, building a large UI is great but be honest, you hate that you had to use 24 nested <div />'s

Move absolutely all of those divs into a single parent div



<div id="example-wrapper">
	<div id="theme-picker-section" >...</div>
	<div id="side-bar-section" >...</div>
	<div id="search-bar-section" >...</div>
	<!--- etc --->
</div>

Within the CSS, create a selector like this


#example-wrapper {
	display: grid;
	gap: 1rem;
	grid-template-areas: "";
}

From here we can visualise the layout structure in the grid-areas-template

For example if we return to the UI, we can see we have two perfect columns and 6 rows

With that, we’ll want to add our grid layout into the grid-template-areas, where normally you would use the css selector names


#example-wrapper {
	display: grid;
	gap: 1rem;
	grid-template-areas: 
		"theme-picker theme-picker"
		"side-bar  search-bar"
		"side-bar  view-area"
		"side-bar  scroll-bar"
		"side-bar  image"
		"side-bar  shapes-picker"
}

But that’s wordy, so let’s use Emojis instead!


#example-wrapper {
	display: grid;
	gap: 1rem;
	grid-template-areas: 
		"🎨  🎨"
		"⬅️  🔍"
		"⬅️  🪟"
		"⬅️  🅿️"
		"⬅️  🖼️"
		"⬅️  🔼"
}

And then simply update each of the original CSS selectors with it’s corresponding emoji identifier


#theme-picker-section {
	grid-area: 🎨;
}

#search-bar-section {
	grid-area: 🔍;
}

#side-bar-section {
	grid-area: ⬅️;
}

#image-section {
	grid-area: 🖼️;
}

/* etc */

And just like that, you went from terrible divs to an elegantly structured grid

Coding With Emojis

Guides and practical notes, training references, and code snippets shared freely for learning and career growth.