JSFiddle - React, Tailwind, and code Playground

by MuLtDirectX

JavaScript

let classes = [
  'b-statcounter',
  'b-statcounter__metrika',
  'b-statcounter__metrika_type_js',
  'i-bem',
  'b-search__table',
  'b-form-input',
  'b-form-input_theme_grey',
  'b-form-input_size_l',
  'i-bem',
  'b-form-input__input',
  'b-search__button',
  'b-form-button__content',
  'b-form-button__text',
  'b-form-button__input',
  'i-bem',
  'b-main-menu',
  'b-main-menu__tab',
  'b-main-menu__tab',
  'b-main-menu__tab',
  'b-main-menu__tab',
  'b-main-menu__tab_type_selected',
  'b-main-menu__tab',
  'b-main-menu__tab_type_selected',
  'l-page__right',
  'b-static-text',
  'b-static-text',
  'b-foot__layout-column',
  'b-foot__layout-column_type_left',
  'b-link',
  'b-foot__link',
  'b-foot__layout-column',
  'b-foot__layout-column',
  'b-foot__layout-column_type_center',
  'b-link',
  'b-foot__link',
  'b-foot__layout-column',
  'b-foot__layout-column_type_penultima',
  'b-link',
  'b-foot__link',
  'b-foot__layout-column',
  'b-foot__layout-column_type_right',
  'b-copyright__link',
  'b-foot__layout-gap-i',
  'otherClass'
]

function makeShortClasses (classes) {

  //////////Making an array of objects with matching between names and frequency of these classes

  let countedValues = []
  
  let reducedObject = classes.reduce((modifiedValues, item, i) => {
    if (modifiedValues[item]) {
      modifiedValues[item]++
    } else {
      modifiedValues[item] = 1
    }
    return modifiedValues
  }, {})

  for (let key in reducedObject) {
    countedValues.push({ name: key, count: reducedObject[key] })
  }

  /////////////////////////////  Making the array of unique counts
  let uniqueCounts = []
  countedValues.forEach(e => {
    uniqueCounts[e.count] = e.count
  })
  uniqueCounts = uniqueCounts.filter(e => e)

  ////////////////////// Making the array of array (sorted by amount and length)

  let categorizedClasses = []

  uniqueCounts.forEach(index => {
    categorizedClasses.push(
      countedValues.filter(e => e.count === index).sort((a, b) => {
   ...