Daphne 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

	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);
	}

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

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

	interface ToastProviderProps {
	navCollapsed?: boolean
	}

	interface AddToastProps {
	content: string

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

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

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

	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);