bem-blocks.txt

BEM = Block-Element-Modifier (web-search it, if you don't know what it is).

These short names are (for me at least) more readable than long not-abbreviated names.
You just need to get used to the abbreviations :-) And not forget them. Hence this file.

s_ = some_Whatever (for classes) NO. Intstead:
c_ = class
t_ = the_Whatever (for ids)  NO (because looks like "test"), instead:
i_ = id
n_ = a class with No styles unless there's another selector before.
     They're widget layout helpers, e.g. n_Row1 or n_Col1, 2, 3.
     This is ok:
        .c_Widget .n_Row1 { ... styles ... }   // other selector before
     but this is not :
        .n_Row1 { ... styles ... }
        .n_Row1 .c_Something { ... styles ... }
     Should *not* be included in Ty's BEM block names.
     So, *not*:  c_Widget_Row2_Part
     instead: c_Widegt .n_Row2 .c_Widegt_Part
     But why? Because otherwise the BEM block names can get annoyingly long.
     It's nice to have a *safe* way to arrange the parts of a widget in rows and columns,
     without then having to rename all parts of the widget — just adding, say,
     n_Row1 and n_Row2, and editing the .c_Sth .n_Row1/2 CSS, but nothing else
     (not having to rename c_Sth_...Sub... to c_Sth_Row1_...Sub... everywhere).
e_ = end-to-end-test_Whatever (classes only, for widgets to click in End-to-End tests)
p_ = public api (classes only, not ids)

Big CSS refactoring: s_  —>  c_  for class attr — then, easy to know what's been refactored.
And  t_  —>  i_  for 'id' attr.

s_w-X = wraps an X, i.e., somewhere inside, there's an X. Or "'W'ith a X inside".
w_X   = wraps X. Always a class, not an id.

In-the-middle or at-a-word-end abbreviations: (but not at the start of the selector)
Ab  = about
Adm = admin
Aft = after
Alw = allow(ed)
Ann, An = announcement, also see SAn: Server Announcement
AuD = authentication dialog (create account / log in / just type a name)
Bef = before
Bitf = bitfield
Em  = email
Enb = enabled, Dsb? Disb? = disabled
B   = button, e.g. ReplyB
Br  = brief. Also, Tn  = tiny, Vb = verbose, Vvb = very verbose.
It  = list item
Cb  = Contextbar
CB  = checkbox, e.g. s_SthCB
Cm, Cmt = comment
Co, Col = column, Rw or Row = row
Cr  = create
Cu  = Custom, e.g. CuNav = custom navigation links
CUD = create user dialog
D  = dialog,  e.g. AbtUsrD
Dg = dialog, when inside a phrase, e.g. InstaDgW = Instant-Dialog-Wrap
Dd = deleted
Del,
Dl = delete  — change to 'Dt'? 'Dl' looks like Download doesn't it?
Dft,
Df  = draft
DiVo = Do-It vote
DnVo = Do-Not vote
Dvo = Do-vote
Dsc,
Disc = discussion
Dl = download — change to Dwnl? so rare
Dis = disabled, Ena = enabled
Ed  = edit
Edr = editor
Eff = effective, but Fx = effect
Emb = embedded or embedding
Feat = feature
FI  = file input
Flg = flag
F   = Forum, e.g. c_F_Ts = forum topics
Fx  = Effect (standard abbr), but Eff = effective
Fxd = fixed, Stc = static
FN  = full name  (alt FuNm)
Fu  = full
G   = group  ? or Gp?  (but not Gr, could mean Greater or sh else?)
Gst = guest
Gt  = greater than, Lt = less than
Hi  = high
Hz  = horizontal, also Vl: vertical
Ifr = iframe
L   = list, when at the end, e.g.:  '..._IdpsL' for Identity Providers list, ..T = table
Ls  = list, when not at the end, e.g LsPgsB = list pages button
Ld  = load, Ldng = loading
LD  = Log in Dialog, RENAME to AuD = Authn Dialog
Lg  = large (screen), also: Sm, Md Xl
LgI = log in, also SgU = sign up, and Au = Authentication, e.g. AuD
Lgi = login
LgO = log out
Lgo = logout
Ls  = list
Lt  = less than, Gt = greater than
Ln  = link — like `ln -s ...` in Linux. E.g. LnPv = Link Preview.
Lo  = low
Lv  = level
Mb  = metabar NO rename to Pb = pagebar
Mr  = member  (or Mbr?)  Us = user, Mr = member, Gp = group, Gs = guest
Md  = medium (screen), also: Sm, Lg, Xl
Mod = moderation
Mnt = mention
Mu  = menu?
Mi  = min, Mx = max
Mx  = max or maximize/d, Mi = min
Nm  = name
Nf  = notification,  e.g. e_NfEm_NwTp = notification email, about a new topic
Nv  = navigation, e.g. NvLs_Ln = Navigation-List Link
Nw  = new
Pat = participant
Pb  = pagebar
Pf  = preference, e.g. NfPfs = notification preferences
Pnl = panel
Py  = property?
Pw  = password, e.g. NwPwI
Perm,
Prm = permission, e.g.: 's_PP_PrmsTb' = profile page, permissions tab
Pp = participant  NO change to Pat
P, Pg = page
Pop = popular
Prvw = preview
Pv = Preview, e.g. LnPv = link preview
Po = post
Re  = reply  NO! Change to Ry — doesn't Re mean "rearding" as well?
Rs  = risk, e.g. RsLv = risk level
R   = table row,  NO, should be Rw, and Cl = column
Rw, Row = row, Col = column
Sav = save
SAn = Server Announcement, also see Ann = announcement
Sch = Search
SgU = sign up, also LgI/LgO = log in/out, and Au = Authentication, e.g. AuD
Sm  = small (screen), also: Md, Lg, Xl
Sbm = submit
Snz = Snooze
St = status or state
Stc = static, Fxd = fixed
Stf = staff
Sub = "sub" as in "sub category"
Sub = submit NO, CLEAN_UP, insetad:
Sug = suggest
Sup = super, like in superadmin
Sz  = size
T   = table, when at the end: TsT = topics *table*
TH  = table header, i.e. <th> (so styles won't affect stuff in <td>)
T   = topic, when at the start: TsT = *topics* table,  hmm, no, RENAME [.TsT_to_TpT]
Tab = tab
Tb  = Topbar, or Tab (when at the end)   RENAME esTopbarWrap to s_Tb
TBx = Tips Box (rename HelpMessageBox to TipsBox)
Tg  = tag
Tkn = token
Tl  = title, no, Ttl instead, see below.
Tn  = tiny. Also Vvb and Vb = (very) verbose, Br = brief.
Tp, Tpc = topic  [.TsT_to_TpT]
Trt = threat
Tru = trust
Tsk = task
Ttl = title
Top = top (as in popular)
Txt = text
Tr  = Trust,  eg. TrLv = trust level NO change to Tru & Trt
Tx  = text (tx = transaction is only server side)
Typ = type
U   = user
Un  = username
Upl = upload
Vb  = verbose, instead of Fat (and Thin) data?. Also Br = brief, Tn = tiny
Vvb = very verbose.
Vl  = vertical, also: Hz: horizontal
Vt  = vote, NO Vo instead,  Vt could be Vertical
W   = wrap, wrapper: a div that's wrapped around the main something
Wik = wiki
Wro = wrong
X   = extra
Xl  = extra large (screen), also: Lg, Sm, Md
Wb  = Watchbar
Example: s_Whatever_SaveB = save button. Or s_SomethingElse_EmT = email addresses table.

...    = B means Button
...WhateverI    = I means Input
...WhateverL    = L means list
...WhateverLI   = List item  — no, use "It" instead, see aboe
...WhateverS    = S means Select (usually react-select)
...WhateverTA   = TA means textarea  — hmm should be "Ta" instead?


esWhatever = old (s_Whatever = new & better)

[refactor] rename esForum_ to esF_ and esForum_Nav to esF_BB
esForum_cats_cat     to s_F_Cs_C?
esForum_topics_topic to esF_Ts_T?

edAvtr          = Avatar, but should rename to s_Av.
s_Av            = Avatar (user profile pic or letter)
esAw            = Arrow to a post from its parent

e2eAddUsD       = Add users dialog

esA             = Admin Area
esA_Ss          = Admin Area, settings
esA_Ss_S        = Admin Area, a single setting
esA_Rvw         = Admin Area, Review section
esA_Rvw_Task    = Admin Area, Review section, a review task — NO, instead...
s_RT            = Review Task   <—— ... this    no RENAME to  MT  = mod task
s_RT_Vts        = Review Task, Votes
s_A_Us          = Admin area, Users section
s_A_Us_Inv      = Admin area, Users section, Invites

s_A_Us_UsL      = Admin area, users section, users list
s_A_Us_UsL_U_Modif  = a specific user row, modifier (like "— admin")

esA_Us_U        = Admin Area, a single user

s_APAs          = After-page-actions
s_APAs_OPRB     = After-page orig-post-reply-button

  C             = category
s_CD            = category dialog: create/edit categories
s_CD_Sec_PoPs   = category dialog, security tab, list of perms-on-pages

esCB            = context bar (the right sidebar)  RENAME s_Cb  Contextbar but NOT ContextBar.

s_Dfs_Df_Ttl    = the title (Ttl), of a draft (Df), in a list of drafts (Dfs).

esE             = The editor, no, esE = old, now s_E:
s_E             = The editor
s_E_E           = The editor, in edit mode
s_E_Max         = The editor, maximized
s_E_Min         = The editor, minimized
t_E_Preview     = The editor preview

esEID           = Edit intro dialog

esF             = the forum main page, incl sort & filter buttons, and topic list and category list
esF_BB          = forum button bar: sort & filter buttons
s_F_BB_CsM      = categories menu
s_F_BB_TF_All   = topic filter, show all
s_F_BB_TF_Wait  = topic filter, show waiting
s_F_BB_TF_Dd    = topic filter, show deleted
esF_TsT         = forum topic list, ... rename to s_F_Ts
esF_Ts_T        = a topic in the topic list
esF_Ts_T_CName  = topic category name
s_F_Cs          = forum category list
s_F_Cs_C        = a category in the category list

e_F_SI_...      = forum sort info: top/latest/etc

esF_TsL         = forum topics list (not table)
esF_TsL_T       = topic in forum topics list
s_F_Ts_T_Con_B  = ..., content, body
s_F_Ts_T_Avs    = Forum topic list, one topic, user avatars
s_F_Ts_T_CN     = Forum topic list, one topic, category name

FD              = flag dialog

G               = group
GP              = groups list page

esH             = help

s_InvD          = invites dialog

c_AuD           = authn (login/signup) dialog

s_MB —> Pb      = topic metabar (just below the Orig Post, before all replies)  RENAME: Pb (pagebar) not MB

s_MMB-IsImp     = my menu button, is-impersonating
s_MM            = my menu (one's avatar + username, in the topbar)   RENAME s_MM to s_MyMenu ?

s_MP            = meta message post, about the topic, e.g. "Nnn closed this topic 3 hours ago"

s_MvPD          = move post dialog

s_NP            = No page, i.e. login-&-create-something-here stuff  RENAME to s_NPg

Nrw             = narrow

  U             = user

s_UD            = About user dialog
s_UD_ExtrInf    = Extra info about the user, e.g. s/he is a Frequent Poster in a topic, or topic starter.

s_PP  --yes--   = Profile page, or Participant's page
s_UP  --no--    = A user's public profile page  RENAME to  s_PP = profile page or pat's page, since groups and gusets too, not just users.
s_UP_Ab         = The about part (the top of the profile page)
s_UP_EmLg       = Emails and logins
esUP_Un         = Username  COULD rename t s_UP_Ab_UN
esUP_FN         = Full name
s_UP_Prfs_Ntfs  = User page, the preferences tab, notifications sub tab  REN to s_UP_Pfs_Nfs ?
s_UP_Nfs        = User page, notifications
UP_Notfs_None   = Notifications, none  REN to UP_Nfs_None

dw-res          = replies, rename to s_Ts = threads
esT             = a thread (i.e. a comment thread: a post and descendant replies)
s_Ts-Flat       = threads, flat layout

esSA            = Super Admin area

s_OpReB-Dsc     = Original post Reply Button, Discussion section
s_OpReB-Prg     = Original post Reply Button, Progress section

s_Pg_DdX        = Page deleted cross (a cross across the whole page)

esP             = a post
esP_Z           = collapse thread button (Z = fold = collapse. Placed inside the post.)

esP_H           = post header (author, date, any chat message actions)
esP_H_At        = at which time the post was posted
esP_H_By        = author
s_P_H_Bm        = bookmark
s_P_H_Unr       = unread mark
esP_B           = post body (the actual text)
s_P-Prvw        = post, previewing one's edits
s_P-Hdn         = post, hidden
s_P-Dd          = post, deleted

esPA  <— No!    = post actions (actually located outside the post (esP) there fore esPA not esP_A)
s_PA  <— yes

s_PT-NN         = page type NN
s_PL-NN         = page layout NN

s_PoP_Un        = perms-on-pages, username
s_PoP_Ps        = perms-on-pages, permissions
s_PoP_Ps_P      = perms-on-pages, single permission

s_Priv          = private, should not be included in UX browser session recording (even if has said yes)

-RRs            = reply receivers
-RRs_RR         = one reply receiver in the list
-RRs_RR_Aw      = arrow after the reply receiver's name, pointing upwarts towards the parent post

esRT            = review task  (rename  e_A_Rvw_Tsk_UndoB  —>  e_RT_UndoB  etc)

esRPP           = reset password page

SD              = stupid dialog

SED             = server error dialog

SchD            = search dialog
(SERP)          = search engine result page -- no, instead, use SRP (not SERP)
(SRP)           = search result page -- no, instead, use SP
SP              = search page
SP_SRs          = search page, search results

SR              = search result

esTB            = topbar (with the breadcrump and login & signup, or user name)
s_Tb_Pg_Cs_C    = topbar, page categories, one of them
s_Tb_Pg_Cs_C-Dd = that category has been deleted

esTs            = page/post tags

esTg            = a single tag

Ttl             = title

esC             = chat, no, instead...
s_C             = chat       <— ... use this
esC_M           = chat message
s_C_M-Dd        = chat message, deleted
s_C_M_B         = chat message button
s_C_M_B-Ed      = chat message edit button
s_C_M_B-Dl      = chat message delete button

esSA            = super admin

esPw            = password

esTTD           = Topic type dropdown

s_VAD           = View As dialog
s_VAD_Sbd       = Somebody to view as

esWB            = watchbar (the left sidebar)  RENAME  Wb = Watchbar not WatchBar!
esWB_T          = watchbar topic

p_ShareD        = share dialog, e.g. Twitter, Google etc.
p_ShareIcon     = Twitter/FB/Google/etc icon to click & share