CSS Emojiments

The best thing that happened to CSS since /* (╯°□°）╯︵ ┻━┻ */

Concept

CSS Emojiments = comments + emoji + sentiments

Wut?

Today, I declare CSS comments bankrupt!

Just think about it… 🤔

Comments all over your CSS, making this shit barely readable. 😨

Comments spanning several lines. 😰

Comments you wrote for yourself like two weeks ago but don’t understand anymore. 😱

But what if you could parse CSS comments efficiently again? 😯

What if you could express yourself clearly? 😀

What if your teammates could understand what you are trying to say… At. First. Sight? 🤗

CSS emojiments absolutely annihilate all those problems, it provides the answers you need and fixes all the issues you’ve got. 🙌

Got 99 problems but comments ain’t one

The “CSS Emojiments” system was designed and engineered flawlessly; it is the result of years of psychological research and User Testing. 🐀

As a matter of fact, users were so happy that they started restoring a healthy work–life balance❗️

CSS Emojiments can be either used as a standalone reference or implemented in your current CSS architecture—or whatever you call dat shit. That’s the reason your QA testers will 💙 it—if you’ve got any, which I doubt.

The system is human at its core, it’s like drunken variables on steroids in a “one-two punch mode” 👊

1. inform others, 🗞
2. express yourself. 📢

We all know that sometimes it is really hard to not yell at someone—including your younger self—, CSS Emojiments acknowledge and, more importantly, embrace this hard truth. 🙏

Examples

Say something must not be modified because values inherit from it, it’s as easy as…

html {
	font-size: 62.5%; 	/* ⛔️ */
}

body {
	font-size: 1.6rem;	/* 🔝 */
}

That’s just magnificent. 👏

---

And say your code is shit, how would you tell others? Easy fucky peasy.

/* 💩 */
.my-css-sucks {
	margin-left: -1000px;
	position: relative;
	z-index: 99999;
}

Now your teammates know they must check that and find another way to do it. And they can respond…

/* 💩 */
.my-css-sucks {
	margin-left: -1000px;	/* 😡 */
	position: relative;
	z-index: 99999;			/* 🤔 */
}

But hey, you’re an intern using Bing to Stack Overflow… and that’s the first time you CSS… so don’t worry much, soon you’ll find those heavy frameworks in which you just need to change some values and your gang will be OK with that. 💪

---

Finally, let’s say you are particularly proud about your CSS. Let’s imagine it is the pinnacle of your career. CSS Emojiments let you do that. But how?

/* 👑 */
.flexbox-ftw {
	display: flex;
	align-items: center;
	justify-content: center;
}

Holy fucking shit, dude, you’ve just achieved vertical centering! Thanks to CSS emojiments, everybody knows that you’re now a God amongst mere mortals and that you’re on your way to becoming the company’s CTO. 🚀

Is this a joke?

I don’t know, I’m making eBooks—which is like the web circa 2006—so you tell me. 😾

Licence

WTFPL 2.0 🤘

---

.cssEmojiments-tagline { 
	display: inline-table;
	content: "no more table flipping™" /* ┬──┬ ノ( ゜-゜ノ) */
}