Class Naming - Specifying unity

[andrepinho]

The current class naming doesn't have any indication on what css unity is being used. ​ For example, spacing and sizes helpers: ​

.mT-100 /* 100 is to pixel */
.w-100 /* 100 is to percentage */

​ Knowing css has quite a few units:

• %
• rem
• em
• px
• vh
• vw ​

Isn't it a good idea to specify what unit is being used in that class? ​ Here are a example of what I'm talking about:

.w-100p {
   width: 100%;
}
​
.fz-1r {
   font-size: 1rem;
}

Perhaps pixels could be default, thus not needing a explicit ​indication:

.pB-20 {
  padding-bottom: 20px
}

Here's a table which I think could be a good reference for a naming rule:

Unity	Class indication	Example
px	default (none)	.pT-20
rem	r	.fz-2r
em	e	.fz-1e
% (percentage)	p	.w-100p

Any suggestion or comments, please reply this issue. Thanks!

[gabeborges]

I think is better to start specifying height and width attributes (px as default and % as *p). Seems more useful to me because it's really common to have some element using % as hero sections or full width elements. The font resizes are usually set as a variable and the project has a font unity standard.