What will result in such a construction in html?

Question

css

What will the use of such a construction in layout turn into? What are the limitations of this method. Is there any markup that uses a similar scheme?

html

<header class="header position--fixed top--null left--null background--51696e" id="js-header">

css

.header {
  width: 100%; height: 80px;
  z-index: 3;
}
.display--flex {
display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}
.display--block {
  display: block;
}
.display--inline-block {
  display:inline-block;
}
.align-items--center {
  align-items: center;
}
.justify-content--center {
  justify-content: center;
}
.position--fixed {
  position: fixed;
}
.position--relative {
  position: relative;
}
.position--absolute {
  position: absolute;
}
.top--null {
  top: 0;
}
.right--null {
  right: 0;
}
.bottom--null {
  bottom: 0;
}
.left--null {
  left: 0;
}
.background--51696e  {
  background: #51696e;
}