BEM stands for Block, Element, Modifier and it is a convention on how to structure CSS rules. Read more here.

For Turnkey the natural Block in BEM is one placed ViewModel column/widget.

Out of the box (this is extended with UI overrides) you will see these Blocks:

BEM_BlockName.Add(CSSControlType.ctStaticText, "tk-static-text");
BEM_BlockName.Add(CSSControlType.ctImage, "tk-image");  //new
BEM_BlockName.Add(CSSControlType.ctTextEdit, "tk-text-field");
BEM_BlockName.Add(CSSControlType.ctCheckbox, "tk-checkbox");
BEM_BlockName.Add(CSSControlType.ctDatePicker, "tk-datepicker"); //new
BEM_BlockName.Add(CSSControlType.ctCombobox, "tk-select");
BEM_BlockName.Add(CSSControlType.ctGrid, "tk-data-table");
BEM_BlockName.Add(CSSControlType.ctGroupbox, "tk-groupbox"); //new
BEM_BlockName.Add(CSSControlType.ctButton, "tk-button");
BEM_BlockName.Add(CSSControlType.ctFile, "tk-file-upload");
BEM_BlockName.Add(CSSControlType.ctLink, "tk-link");
BEM_BlockName.Add(CSSControlType.ctTextArea, "tk-textarea"); //new  , multiline text
BEM_BlockName.Add(CSSControlType.ctNumberEdit, "tk-number-field"); //new
BEM_BlockName.Add(CSSControlType.ctFloatNumberEdit, "tk-float-field"); // new

A Block is the outer div that we place in the CSS-grid to position it at the same position you designed it.

The Element in BEM is then the inner parts of a BEM Block.

You will typically find these blocks in Turnkey generated html:

BEM_ElementName.Add(CSSBEMElement.bEm__native, "__native");  // the actual html control
BEM_ElementName.Add(CSSBEMElement.bEm__label, "__label");  // the label
BEM_ElementName.Add(CSSBEMElement.bEm__content, "__content");  // enclosing inner div 

Looking at html to examplify we will get this: