Documentation:CSS BEM

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 elements found inside blocks in Turnkey generated html:

BEM_ElementName.Add(CSSBEMElement.bEm__native, "__native");  // the actual html control
BEM_ElementName.Add(CSSBEMElement.bEm__interactive, "__interactive");  // the html control the user can change, similair to __native but for certain controls (checkbox) the __native is hidden and a span is __interactive
BEM_ElementName.Add(CSSBEMElement.bEm__label, "__label");  // the label
BEM_ElementName.Add(CSSBEMElement.bEm__content, "__content");  // enclosing inner div 

Looking at html to exemplify we will get this html :

<div class="tk-text-field">
    <label class="tk-text-field__label">Name</label>		
    <input class="tk-text-field__native">
</div> 

And it will be default rendered like this:

The aim of our BEM approach is to allow you to target a single element inside a specific block in order to override the style to your needs.

The third letter of BEM is Modifier. A Modifier is in the BEM convention typically described as an additional appendix to the element rules. In turnkey we treat all the style references that you add in the designer as Modifiers. These modifiers will be added as separate classes to block levels to make it easy for you to create modifier styles that match a block or element within a block by normal css rules.

Possibly breaking changes introduced 2019-06-30

We aim to keep backwards compatibility - this time we needed to harmonize according to the BEM convention

Was	Is
.tk-button	.tk-button_native
.tk-button.tk-button--narrow	.tk-button__native--narrow
.tk-checkbox__label	.tk-checkbox__content	the style did not target the label surrounding the __native
.tk-checkbox	.tk-checkbox__interactive
.tk-data-table	.tk-data-table__content	the style targets the div containing the table
.tk-data-table__content	.tk-data-table__native	this is the true table
.tk-select__native-control	.tk-select__native	native-control should be native as everywhere else
.tk-text-field	.tk-text-field__native