Abbreviation

Last updated: 19 days ago

Category: Get Started

Variable and naming abbreviations are primarily intended to improve developer programming efficiency, followed by making it easier for users to remember and quickly use them, and finally to reduce fil...

Introduction

There are many abbreviations used in this framework's CSS and JS files. Most of these abbreviations follow common patterns, such as primary being shortened to prim. Some abbreviations were created manually when no standard English abbreviation existed, like translucent being shortened to tl.

The purposes of using abbreviations are:

• Improve developer coding efficiency. Developers who aren't fluent in English often need to refer to API documentation to find property or style names, which can be time-consuming. Using abbreviations allows developers to quickly use properties by remembering just part of the word.
• Reduce file size. While JS files can be minified to simplify names automatically, CSS files cannot. Therefore, using abbreviations helps significantly reduce CSS file size.

This page lists common abbreviations used in the framework.

Common Abbreviations

Abbreviation	Full Word	Meaning	Notes
prim	primary	primary
succ	success	success
warn	warning	warning
info	information	information
buf	buffer	buffer
load	loading	loading
btn	button	button
nav	navigation	navigation
obs	observer/observe	observe
opts	options	options
opt	option	option
str	string	string
arr	array	array
obj	object	object
cumb	breadcrumb	breadcrumb
ins	instance	instance
stor	storage	storage	Combined: storName, storKeys
ell	ellipsis	ellipsis
tpl	template	template
wrap	wrapper	wrapper
bd	border	border
bg	background	background
bc	background-color	background color
grad	gradient	gradient
sd	shadow	shadow
br	break	break
txt	text	text
msg	message	message
pop	popup	popup
valid	validate	validate
cont	content	content
req	request	request
cmpt	component	component
mod	module	module
lt	light	light	Often paired with dk
tmp/temp	temporary	temporary
dp	deepen	deepen
gy	grey	grey
dk	dark	dark	Often paired with lt
pos	position	position
cb	callback	callback
el	element	element
idx	index	index
num	number	number
evt	event	event
fn	function	function
dir	direction	direction
v	vertical	vertical	Often paired with h
h	horizontal/height	horizontal/height	Often paired with v
w	width	width	Often paired with h
crude	create + read + update + delete	CRUD
err	error	error
ctx	context	context
val	value	value
lbl	label	label	Often paired with val
arg	argument	argument
args	arguments	arguments
hdr	header	header
ftr	footer	footer
sec	section	section
disp	display	display
auth	authorization	authorization
intl/i18n	internationalization	internationalization
col	column	column
conn	connect	connect
cfg	configuration	configuration
dist	distribution	distribution
lib	library	library
doc	documentation	documentation
a11y	accessibility	accessibility
b4	before	before	Phonetic substitution
2	to	to	Phonetic substitution, often combined
l8r	later	later	Phonetic substitution
ver	version	version

Custom Abbreviations

Abbreviation	Full Word	Meaning	Notes
ing	xxxing	in progress	e.g.: live, living, lived
ed	xxxed	completed	e.g.: live, living, lived
fc	focus	focus	Custom
ht	halftone	halftone	Custom
aj	adjacent	adjacent color	Custom
sg	sunglass	glass effect	Custom
ct	contrast	contrast color	Custom
tp	transparent	transparent	Custom
tl	translucent	translucent	Custom
ac	acrylic	acrylic effect	Custom
fg	frosted glass	frosted glass	Custom

CSS Variable Abbreviations

With numerous modules and corresponding style files, there are many style variables used. To distinguish between modules, specific prefixes are used, while common properties are abbreviated. The reasons for using abbreviations include reducing recall time for English words and decreasing CSS file size.

Below are the abbreviation conventions for CSS variables:

Abbreviation	Full Word		Abbreviation	Full Word
h	height		w	width
lh	line-height		sd	shadow/outline
r	radius		a	align
d	display		bd	border
c	color		bg	background/background-color
v	vertical		h	horizontal
p	padding		m	margin
lr	left-right		tb	top-bottom
btn	button		sm	small
md	middle		lg	large
fs	font-size		ff	font-family
sz	size		g	gap
grad	gradient		ani	animation
act	active		se	start-end
o	opacity