Convención de nomenclatura de clases CSS

En una página web, hay dos bloques de controles (primario y secundario), ¿qué nombres de clase usaría la mayoría de la gente?

Elección 1:

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Elección 2:

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>
Author: bobo, 2011-10-28
Source

4 answers

La respuesta directa a la pregunta es justo debajo de esta, por Curt.

Si estás interesado en las convenciones de nomenclatura de clases CSS, sugiero considerar una convención muy útil llamada BEM (Bloque, Elemento, Modificador ).

ACTUALIZAR

Por favor, lea más al respecto aquí - http://getbem.com/naming / - esa es una versión más reciente que hace que la siguiente respuesta sea obsoleta.

Principios principales:

  • Una página es construido a partir de Bloques independientes. Block es un elemento HTML cuyo nombre de clase tiene un prefijo " b -", como " b-page "o" b-login-block "o"b-controls".

  • Todos los selectores CSS se basan en bloques. No debería haber ningún selector que no comience con " b -".

Bueno: 

.b-controls .super-control { ... }

Malo: 

.super-control { ... }
  • Si necesita otro bloque (en la otra página tal vez) que sea similar al bloque que ya tiene, debe agregar un modificador a su bloque en lugar de crear uno nuevo.


Ejemplo:

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Con modificador: 

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Luego puede especificar cualquier modificación en CSS: 

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

Si tiene alguna pregunta, estaré encantado de discutirla con usted. He estado usando BEM durante dos años y afirmo que esta es la mejor convención que he conocido.

 76
Author: Ivan Ivanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-15 12:30:47

Yo iría con: 

<div class="controls primary">
 <button type="button">Create</button>
</div>

<div class="controls secondary">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Mientras tu CSS esté estructurado correctamente, primary y secondary no deberían chocar con nada más en tu aplicación: 

.controls.primary {}

Observe que también he puesto controls por delante de primary/secondary en el código, ya que esta es su clase principal.

Creo que el primer conjunto debajo es mucho más legible que el segundo: 

.controls.primary {}
.controls.secondary {}


.primary.controls {}
.secondary.controls {}
 24
Author: Curt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-28 09:07:11

Existe una gran alternativa llamada NCSS.

Named Cascading Style Sheets es una convención de nomenclatura y una guía para semantic CSS.

Por qué:

Massive CSS solía ser una pesadilla mientras trabajaba en proyectos con diferentes tipos de desarrolladores. La falta de convenciones y directrices va a conducir a una bola de barro inalcanzable.

Objetivo:

Una gramática predecible para CSS que proporciona semántica información sobre la plantilla HTML.

  • Qué etiquetas, componentes y secciones se ven afectados
  • ¿Cuál es la relación de una clase con otra

Clases:

Las Hojas de Estilo en Cascada con nombre se dividen en:

  • Espacios de nombres
  • Clases estructurales
  • Clases de componentes
  • Clases de tipo
  • Clases de modificadores
  • Clases funcionales
  • Excepciones

Más información: https://ncss.io/documentation/classes

Ejemplos:

<!-- header -->

<header id="header" class="foo-header"> 
    <h1 class="foo-title-header">Website</h1>
</header>

<!-- main -->

<main class="foo-main foo-wrapper">

    <!-- content -->

    <article id="content" class="foo-content">
        <h2 class="foo-title-content">Headline</h2>
        <div class="foo-box-content">Box</div>
    </article>

    <!-- sidebar -->

    <aside id="sidebar" class="foo-sidebar">
        <h3 class="foo-title-sidebar">Headline</h3>
        <p class="foo-text-sidebar">Text</p>
    </aside>

</main>

<!-- footer -->

<footer id="footer" class="foo-footer">
    <div class="foo-box-footer">Powered by NCSS</div>
</footer>

Lectura adicional: https://ncss.io/documentation/examples

Herramientas:

Instalación: 

npm install ncss-linter

Valida una cadena HTML:

bin/ncss-linter --html='<div class="box-content"></div>'

Validar una ruta local: 

bin/ncss-linter --path=templates/**/*.html --namespace=foo

Valida una URL remota: 

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Lectura adicional: https://ncss.io/documentation/tools

 3
Author: redaxmedia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-20 23:26:54

Twitter usa SUIT CSS:

Https://github.com/suitcss/suit/blob/master/doc/README.md

El mismo autor también escribió CSS idiomático:

Https://github.com/necolas/idiomatic-css

 1
Author: turbophi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-12 07:26:29