Convención de nomenclatura React className

Agradecemos tu apoyo para extender nuestras reseñas acerca de las ciencias informáticas.

Solución:

TLDR: PascalCase y Block__Element--Modifier

Consulte el documento oficial de create-react-app. Proporciona un ejemplo mínimo de creación de un componente personalizado. los js y css nombres de archivo, así como el className todos están siguiendo PascalCase.

// Button.css
.Button 
  padding: 20px;


// Button.js
import React,  Component  from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles

class Button extends Component 
  render() 
    // You can use them as regular CSS styles
    return 
;
  

Además, el documento también proporciona un enlace externo, que describe las convenciones de nomenclatura de BEM (enlace) para elementos dentro del componente.

// MyComponent.js
require('./MyComponent.less');
import  Component  from 'react';
export default class MyComponent extends Component 
  render() 
    return (
      

        
Icon
        ...
      
    );
  


// MyComponent.less
.MyComponent__Icon 
  background-image: url('icon.svg');
  background-position: 0 50%;
  background-size: fit;
  height: 50px;

Algunas de las convenciones de nomenclatura (recomendadas) son:

1. Nombre del componente

   El nombre del componente debe estar en PascalCase.

   Por ejemplo,MyComponent, MyChildComponent etc.

---

2. Atributos

   El nombre del atributo debe ser camelCase.

   Por ejemplo,className, onClick etc.

---

3. Estilos en línea

   Los estilos en línea deben ser camelCase.

   Por ejemplo,

   My Text

   etc.

---

4. Nombres de variables

   Los nombres de las variables pueden ser camelCase (Buena práctica), PascalCase (Evitable), lowercasetambién puede contener number y special caracters.

   Por ejemplo,state = variable:true, Variable:true, variableName:true etc.

---

5. Nombre de la clase

   Los nombres de clase pueden ser cualquier cosa camelCase, PascalCase, lowercasetambién puede contener number y special caractersporque después de todo es un string.

   Por ejemplo,className="myClass MyClass My_Class my-class" etc.

Eso depende totalmente de su preferencia (y la de su equipo). React (ni HTML simple) no le restringe el uso de nombres de clase inferiores, con guiones o mayúsculas y minúsculas.

Sin embargo, le recomendaría que elija una convención CSS existente como BEM. Esto asegurará que los nombres de las clases permanezcan consistentes a lo largo del proceso (si se siguen correctamente).

Hemos elegido una convención personalizada en nuestros proyectos para hacer coincidir los nombres de clase de nuestros componentes con el nombre del componente.

Ejemplo:

const NavBar = () => (
  

    

  
);

Como puede ver, esto se parece mucho a BEM, excepto por el bloque pascal, el separador de un solo guión para los elementos y un separador de doble guión para los modificadores de bloque.

Aquí puedes ver las comentarios y valoraciones de los lectores

---

---

Utiliza Nuestro Buscador