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

  function makeNameCountMatchingArray(classes) {
  
    let countedValues = []
    const 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 => {
   ...