daphnesmit

Why is BEEEEEEM Not Preferred Over BEM?

BEM (Block, Element, Modifier) is a widely adopted naming convention in web development, especially for CSS, because it provides a clear, maintainable, and scalable methodology for naming and structuring CSS classes. The convention breaks down the user interface into independent blocks, elements within those blocks, and modifiers that alter the appearance or behavior of those blocks or elements.

BEEEEEEM, which stands for Block, Element, Element, Element, Element, Element, Modifier, suggests a much more nested and complex structure. Here are several reasons why BEEEEEEM is not preferred over BEM:

Complexity and Readability

• BEM: block__element--modifier (e.g., button__icon--large)
• BEEEEEEM: block__element__element__element__element__element--modifier

daphnesmit

import { useCallback, useEffect, useRef, useState } from "react";
import { WebSocketConnection, createWebSocketConnection } from "./ws";

function Example() 
  const wsRef = useRef<WebSocketConnection | null>(null);
  const [data, setData] = useState<{ market: string; volume: string }[]>([]);

  const onMessage: WebSocket["onmessage"] = useCallback(
    (message: MessageEvent) => {
      const data = JSON.parse(message.data);

daphnesmit

import React, { useEffect } from 'react'
import {
  CellProps,
  Column,
  HeaderProps,
  Row,
  useExpanded,
  usePagination,
  useRowSelect,
  useSortBy,

daphnesmit

import fetch from 'isomorphic-fetch'
import qs from 'qs'

export interface HttpErrorInput {
  message: string
  statusCode: number
  response?: Response
  body?: any
}

daphnesmit

import React, { FC, useCallback, useContext, useMemo, useReducer } from 'react'

import { AlertType, reducer, Toast } from './reducer'

interface ToastProviderProps {
  navCollapsed?: boolean
}

interface AddToastProps {
  content: string

daphnesmit

function numberToHex(number) {
  const step2 = Math.PI * number
  const step3 =  Math.round(step2 * 100) / 100
  const step4 = ((number / 100) * 33) * step3
  const step5 = Math.round(step4)
  return step5.toString(16);
}