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)
t_ = the_Whatever (for ids)
e_ = end-to-end-test_Whatever (classes only, for stuff to click in End-to-End tests)
p_ = public api (classes only, not ids)

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)
Em = email
B  = button, e.g. ReplyB
T  = table
Ttl = title
Txt = text
Lk = link
L  = list
It = list item
D  = dialog,  e.g. AbtUsrD
Dd = deleted
Dl = delete  — change to 'Dt'? 'Dl' looks like Download doesn't it?
Df = draft
Dl = download — change to Dwnl? so rare
CB = checkbox, e.g. s_SthCB
Cb = Contextbar
Cr = create
Cu = Custom, e.g. CuLns = custom links
Nf = notification
Pf = preference, e.g. NfPfs = notification preferences
Pw = password, e.g. NewPwI
St = status or state
R = table row
U  = user
FI = file input
G  = group
Pp = participant
P, Pg = page
Prvw = preview
Po = post
Tb = Topbar   RENAME esTopbarWrap to s_Tb
Un = username
FN = full name
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
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

esLD            = login/signup dialog

s_MB            = topic metabar (just below the Orig Post, before all replies)  RENAME: Mb 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_UP            = A user's public profile page  RENAME to  s_PPP = participant's profile page?
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            = post actions (actually located outside the post (esP) there fore esPA not esP_A)

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

(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_Cs_C       = topbar, ancestor categories, one of them  RENAME:  Tb  not TB.
s_TB_Cs_C-Dd    = 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
esOb            = onebox

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