CSS strange selectors names and long code, is this was built using specific framework?

Issue

I have come across a web project with many CSS files. However, I noticed that the CSS declarations seem to be written a little bit strangely. Please see the segment below which is just small part of the file. Was this generated using specific framework?

.ms-core-listMenu-verticalBox .ms-navedit-addLinkText {
  vertical-align: middle;
}

.ms-navedit-menuLoading {
  margin-left: 18px;
}

.ms-navedit-errorIcon {
  left: -19px;
  top: -238px;
  position: absolute;
}

.ms-navedit-errorSpan {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

.ms-core-listMenu-verticalBox .ms-listMenu-editLink {
  margin: 15px 20px 0px 0px;
  border: 1px solid transparent;
}

.ms-core-listMenu-verticalBox .ms-listMenu-editLink.ms-navedit-panelEditMode {
  margin-top: 0px;
}

.ms-core-listMenu-horizontalBox>.ms-core-listMenu-root>.ms-listMenu-editLink {
  margin-right: 10px;
}

.ms-core-listMenuEdit {
  padding: 0px;
}

.ms-core-listMenu-verticalBox li.static>.ms-core-listMenuEdit,
.ms-core-listMenu-verticalBox li.static>.ms-navedit-titleBoxListItem {
  table-layout: fixed;
  margin-right: 14px;
}

.ms-core-listMenu-horizontalBox li.static>.ms-core-listMenuEdit {
  width: auto;
}

.ms-tv-header {
  margin-bottom: 5px;
  border: 1px solid transparent;
}

.ms-tv-box {
  margin-top: 6px;
}

.ms-tv-item {
  vertical-align: top;
  margin-right: 4px;
}

.ms-navedit-ghosted {
  opacity: 0.3;
}

.ms-core-needIEFilter .ms-navedit-ghosted {
  filter: alpha(opacity=30);
  -ms-filter: "alpha(opacity=30)";
}

.ms-core-listMenu-separatorLine {
  margin: 10px 0px;
}

.ms-nav-list-item,
.ms-nav-subList-item {
  padding-top: 18px;
}

.ms-nav-subList-item {
  margin-right: 20px;
}

table.ms-listviewtable {
  border-collapse: separate;
}

.ms-vh,
.ms-vh2,
.ms-vhImage,
.ms-vh2-nograd,
.ms-vh3-nograd,
.ms-vh2-nograd-icon,
.ms-vh2-nofilter-icon,
.ms-ph {
  padding: 5px 5px 5px 17px;
}

.ms-vh,
.ms-vh-leftPadding {
  padding-right: 5px;
}

.ms-vh-icon,
.ms-vh-icon-empty,
.ms-vh2-nofilter,
.ms-vh2-nofilter-notextalign,
.ms-vh2-nofilter-perm {
  padding: 5px;
}

.ms-vh-icon>div>.s4-ctx,
.ms-vh-icon-empty>div>.s4-ctx {
  display: none;
}

.ms-vh-hoverable:hover {
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  background-color: rgba( 205, 230, 247, 0.5);
}

.ms-core-needIEFilter .ms-vh-hoverable:hover {
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgba( 205,230,247,0.5 ),endColorstr=rgba( 205,230,247,0.5 ))";
  ;
}

.ms-headerCellStyleHover {
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  background-color: rgba( 205, 230, 247, 0.5);
}

.ms-core-needIEFilter .ms-headerCellStyleHover {
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7fcde6f7,endColorstr=#7fcde6f7)";
}

.ms-headerCellStylePressed {
  /* [ReplaceColor(themeColor:"SelectionBackground",opacity:"1")] */
  background-color: #9ccef0;
}

.ms-headerCellStyleMenuOpen {
  /* [ReplaceColor(themeColor:"SelectionBackground")] */
  background-color: rgba( 156, 206, 240, 0.5);
}

.ms-core-needIEFilter .ms-headerCellStyleMenuOpen {
  /* [ReplaceColor(themeColor:"SelectionBackground")] */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7f9ccef0,endColorstr=#7f9ccef0)";
}

.ms-vh2-nofilter,
.ms-vh2-nofilter-notextalign,
.ms-vh2-nofilter-perm,
.ms-vh a,
.ms-vh2,
.ms-vh2 a {
  /* [ReplaceColor(themeColor:"SubtleBodyText")] */
  color: #777;
}

.ms-headerCellStyleHover a,
.ms-headerCellStylePressed a,
.ms-headerCellStyleMenuOpen a {
  /* [ReplaceColor(themeColor:"CommandLinks")] */
  color: #666;
}

.ms-headerSortTitleLink,
.ms-headerSortArrowLink {
  cursor: default;
}

.ms-headerSortArrowLink {
  display: block;
}

.ms-headerCellStyleIcon:hover {
  /* [ReplaceColor(themeColor:"AccentLines")] */
  border-bottom-color: #2a8dd4;
}

.ms-spGrid-HeaderContentStyle {
  padding: 7px 4px 6px 22px;
}

.ms-spGrid-HeaderContentStyle-Rename {
  padding: 3px 5px 0px 5px;
}

.ms-minWidthHeader {
  width: 1px;
}

.ms-cellstyle,
.ms-cellStyleNonEditable,
.ms-cellStyleMenuHover,
.ms-MenuCellStyle-TdHover,
.ms-MenuCellStyle-MenuDivHover {
  border: solid 1px transparent;
}

.ms-list-itemLink {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  width: 30px;
  height: 25px;
}

.ms-list-TitleLink {
  width: 250px;
}

.ms-lstItmLinkAnchor {
  margin-top: 6px;
}

.ms-list-itemLink-td {
  width: 30px;
  vertical-align: top;
}

.ms-vh-selectAllIcon {
  vertical-align: middle;
  width: 30px;
  padding: 0px;
}

.ms-vh-selectAllIcon:hover {
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  background-color: rgba( 205, 230, 247, 0.5);
}

.ms-core-needIEFilter .ms-vh-selectAllIcon:hover {
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7fcde6f7,endColorstr=#7fcde6f7)";
  ;
}

.ms-vb-imgFirstCell.ms-vb-imgFirstCell.ms-vb-imgFirstCell {
  cursor: pointer;
  border-width: 0px;
  border-left-width: 10px;
}

.ms-vb-imgFirstCell:hover,
.ms-vb-imgFirstCell:focus {
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  background-color: rgba( 205, 230, 247, 0.5);
}

.s4-itm-selected>.ms-vb-imgFirstCell.ms-vb-imgFirstCell {
  /* [ReplaceColor(themeColor:"RowAccent")] */
  background-color: #0072c6;
  /* [ReplaceColor(themeColor:"SelectionBackground")] */
  border-left-color: rgba( 156, 206, 240, 0.5);
  background-clip: padding-box;
  -webkit-background-clip: padding;
}

.s4-itm-imgCbx {
  outline-style: none;
  width: 20px;
  text-align: center;
}

.s4-itm-imgCbx-inner {
  width: 20px;
  height: 100%;
}

.ms-selectitem-span {
  visibility: hidden;
  display: inline-block;
  height: 10px;
  width: 10px;
  position: relative;
  overflow: hidden;
}

.ms-selectitem-icon {
  position: absolute;
}

.ms-vb-imgFirstCell:hover .ms-selectitem-icon,
.ms-vb-imgFirstCell:focus .ms-selectitem-icon,
.ms-itmHoverEnabled:hover .ms-selectitem-icon {
  left: -32px;
  top: -256px;
}

.s4-itm-selected .ms-selectitem-icon.ms-selectitem-icon {
  left: -44px;
  top: -256px;
}

.s4-itm-selected .ms-selectitem-span,
.ms-vb-imgFirstCell:hover .ms-selectitem-span,
.ms-vb-imgFirstCell:focus .ms-selectitem-span,
.ms-itmHoverEnabled:hover .ms-selectitem-span {
  visibility: visible;
}

.ms-selectall-span {
  display: inline-block;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
}

.ms-selectall-iconouter {
  outline: none;
  display: inline-block;
  height: 10px;
  width: 10px;
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-right: -3px;
}

.ms-selectall-icon {
  left: -32px;
  top: -256px;
  position: absolute;
}

.ms-newdocument-iconouter {
  display: inline-block;
  height: 16px;
  width: 16px;
  position: relative;
  overflow: hidden;
  text-align: center;
  top: 4px;
}

.ms-newdocument-icon {
  left: -91px;
  top: -196px;
  position: absolute;
}

.ms-filter-iconouter {
  display: inline-block;
  height: 10px;
  width: 12px;
  position: relative;
  overflow: hidden;
  margin: 0px 2px;
}

.ms-filter-icon {
  left: -251px;
  top: -174px;
  position: absolute;
}

.ms-sortarrowdown-iconouter {
  display: inline-block;
  height: 10px;
  width: 7px;
  position: relative;
  overflow: hidden;
  margin: 0px 2px;
}

.ms-sortarrowdown-icon {
  left: -23px;
  top: -256px;
  position: absolute;
}

.ms-sortarrowup-iconouter {
  display: inline-block;
  height: 10px;
  width: 7px;
  position: relative;
  overflow: hidden;
  margin: 0px 2px;
}

.ms-sortarrowup-icon {
  left: -14px;
  top: -256px;
  position: absolute;
}

.ms-commentcollapse-iconouter {
  display: inline-block;
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
}

.ms-commentcollapse-icon {
  left: -251px;
  top: -146px;
  position: absolute;
}

.ms-commentcollapsertl-iconouter {
  display: inline-block;
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
}

.ms-commentcollapsertl-icon {
  left: -251px;
  top: -160px;
  position: absolute;
}

.ms-commentexpand-iconouter {
  display: inline-block;
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
}

.ms-commentexpand-icon {
  left: -253px;
  top: -186px;
  position: absolute;
}

.ms-commentexpandrtl-iconouter {
  display: inline-block;
  height: 12px;
  width: 12px;
  position: relative;
  overflow: hidden;
}

.ms-commentexpandrtl-icon {
  left: -251px;
  top: -118px;
  position: absolute;
}

.ms-updatelink-span {
  height: 16px;
  width: 16px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.ms-updatelink-icon {
  left: -109px;
  top: -196px;
  position: absolute;
}

table.ms-listviewtable tbody>tr>td.ms-vb-lastCell {
  padding-left: 10px;
}

.ms-spgrid-col-header-normal {
  font-size: 0.85em;
  font-weight: normal;
  /* [ReplaceColor(themeColor:"SubtleBodyText")] */
  color: #777;
  background-color: transparent;
  /* [ReplaceColor(themeColor:"SubtleLines")] */
  border-bottom-color: #c6c6c6;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-normal-hover {
  font-size: 0.85em;
  font-weight: normal;
  /* [ReplaceColor(themeColor:"CommandLinks")] */
  color: #666;
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  background-color: rgba( 205, 230, 247, 0.5);
  /* [ReplaceColor(themeColor:"SubtleLines")] */
  border-bottom-color: #c6c6c6;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-elem-bg-colors-normal-hover {
  background-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.ms-spgrid-col-header-elem-hover-bg-colors-normal-hover {
  background-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.ms-spgrid-col-elem-colors-click-normal-hover {
  background-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-part-selected {
  font-size: 0.85em;
  font-weight: normal;
  /* [ReplaceColor(themeColor:"SubtleBodyText")] */
  color: #777;
  background-color: transparent;
  /* [ReplaceColor(themeColor:"AccentLines")] */
  border-bottom-color: #2a8dd4;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-part-selected-hover {
  font-size: 0.85em;
  font-weight: normal;
  /* [ReplaceColor(themeColor:"CommandLinks")] */
  color: #666;
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  background-color: rgba( 205, 230, 247, 0.5);
  /* [ReplaceColor(themeColor:"AccentLines")] */
  border-bottom-color: #2a8dd4;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-elem-bg-colors-part-selected-hover {
  background-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.ms-spgrid-col-header-elem-hover-bg-colors-part-selected-hover {
  background-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.ms-spgrid-col-elem-colors-click-part-selected-hover {
  background-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-all-selected {
  font-size: 0.85em;
  font-weight: normal;
  /* [ReplaceColor(themeColor:"SubtleBodyText")] */
  color: #777;
  background-color: transparent;
  /* [ReplaceColor(themeColor:"AccentLines")] */
  border-bottom-color: #2a8dd4;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-all-selected-hover {
  font-size: 0.85em;
  font-weight: normal;
  /* [ReplaceColor(themeColor:"CommandLinks")] */
  color: #666;
  /* [ReplaceColor(themeColor:"HoverBackground")] */
  background-color: rgba( 205, 230, 247, 0.5);
  /* [ReplaceColor(themeColor:"AccentLines")] */
  border-bottom-color: #2a8dd4;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}

.ms-spgrid-col-header-elem-bg-colors-all-selected-hover {
  background-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.ms-spgrid-col-header-elem-hover-bg-colors-all-selected-hover {
  background-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.ms-spgrid-col-elem-colors-click-all-selected-hover {
  background-color: transparent;
  border-left-color: transparent;
}

.ms-standardheader {
  font-size: 1em;
  margin: 0px;
  text-align: right;
  font-weight: normal;
}

.ms-formlabel {
  white-space: nowrap;
  font-weight: normal;
  padding: 6px 0px 6px 5px;
}

.ms-formlabel h3.ms-standardheader {
  font-weight: normal;
}

.ms-formbody {
  background: transparent;
  padding: 6px 0px;
}

I tried to understand how this CSS was written. Was it by using specific framework, was it auto-generated by using specific tool?

Solution

So it looks like this linked to SharePoint.
I'm afraid I don't have much knowledge in this but did find a couple of pieces of information that pointed me to this conclusion:

1. I searched "data-themingsource" themable css
   i. The reason I did this was when I worked back from your link to the website, I found that the CSS file in the head element has this data-themingsource attribute.
   ii. data-... attributes are very commonly bespoke to a particular purpose, searching for that landed me SharePoint Stack Exchange with this question. iii. Another search landed me on this SharePoint CodePen which uses the same data-themingsource

2. I also searched "[ReplaceColor(themeColor:" (with the quotes)
   i. There were lines in the CSS that said this on CSS file on the site linked, which took me to the SharePoint Stack Exchange (again), and to this question

So I would say with relative certainty that this file was generated by some kind of design management platform integrated with SharePoint. As to how SharePoint generates that CSS, I wouldn't be able to say for sure but Microsoft seem so have documentation on these things

Other things to look for: When trying to work out where CSS has come, from I'll inspect (Right-click, "Inspect element) an element on the page and look at the file endings, some files will be CSS and some could be SCSS etc.
Clicking on the file linked will take you to the file itself, and you can sometimes see comments and syntax only found with a particular framework (see screenshot below)

Answered By - Harrison