Naming Convention in CSS Properties in JavaScript
When we work with CSS in JavaScript, we need to use special rules for writing the names of the properties. These rules are called naming conventions. Think of them as style rules for writing names that everyone can understand!
In JavaScript, we mainly use 3 types of naming conventions for CSS properties:
1. Camel Case.
2. Kebab Case.
3. Pascal Case.
1. Camel Case (The Most Common Way in JavaScript)
In Camel Case, we write the property name like a camel’s hump—the first word is all lowercase, and each new word starts with a capital letter. This is the most common way to write CSS properties in JavaScript!
Example:
• backgroundColor
• fontSize
• marginTop
// Camel Case
element.style.backgroundColor = ‘red’; // This changes the background color of an element to red
element.style.fontSize = ’16px’; // This sets the font size of the element to 16px
element.style.marginTop = ’10px’; // This sets the space above the element to 10px
2. Kebab Case (Used in CSS, but not in JavaScript)
In the Kebab Case, words are separated by hyphens (like a hot dog bun, where each word is inside a bun). This is the way we usually write CSS properties in regular CSS files.
Example:
• background-color
• font-size
• margin-top
// Kebab Case
.element {
background-color: red; /* Sets the background color to red */
font-size: 16px; /* Sets the font size to 16px */
margin-top: 10px; /* Sets the space above the element to 10px */
}
3. Pascal Case (Less Common for CSS Properties)
In Pascal Case, each word in the property name starts with a capital letter (just like Camel Case), but there’s no lowercase word at the beginning. Every word, including the first one, starts with a capital letter.
Example:
• BackgroundColor
• FontSize
• MarginTop
// Pascal Case
element.style.BackgroundColor = ‘red’; // Not as common, but works
element.style.FontSize = ’16px’; // Not typically used
element.style.MarginTop = ’10px’; // Also not typically usedto 10px
Quick Tips:
• Always use Camel Case in JavaScript for CSS properties.
• Use Kebab Case in your CSS files.
• Avoid using the Pascal Case unless necessary.
