Naming Conventions for React Styling

Sources:

• **

title: ## Contents 
style: nestedList # TOC style (nestedList|inlineFirstLevel)
minLevel: 1 # Include headings from the specified level
maxLevel: 4 # Include headings up to the specified level
includeLinks: true # Make headings clickable
debugInConsole: false # Print debug info in Obsidian console

Overview

TIP

It’s a good idea to use a consistent naming convention for your CSS classes to keep your styles organized and easy to understand. Some popular conventions include Block-Element-Modifier (BEM) and Scalable and Modular Architecture for CSS (SMACSS).

Examples

Here’s an example of how these conventions might be used together in a React component:

import React from 'react';
import './ProfileInfo.css';
 
function ProfileInfo(props) {
  return (
    <div className="profile-info">
      <h2>{props.name}</h2>
      <p>{props.bio}</p>
    </div>
  );
}
 
export default ProfileInfo;

And the corresponding CSS:

.profile-info {
  background-color: #f5f5f5;
  padding: 20px;
}

In this code, the following naming conventions are used:

• The React functional component is named ProfileInfo, which follows the UpperCamelCase or PascalCase convention for naming React components.
• The CSS file imported is named ProfileInfo.css, which also follows the UpperCamelCase convention and matches the name of the component.
• The class in the JSX template is profile-info, which follows the lowercase and hyphen-separated convention, also known as kebab-case, for naming CSS classes.

You can read more about naming conventions here if you like.

---

Appendix

Note created on 2024-05-13 and last modified on 2024-05-13.

See Also

• CSSLint
• Stylelint
• ESLint

Backlinks

LIST FROM [[Naming Conventions for React Styling]] AND -"CHANGELOG" AND -"//Naming Conventions for React Styling"

---

(c) No Clocks, LLC | 2024