What is kebab-case?

Hi Ambika!

kebab-case is a popular naming convention used in CSS where words are all lowercased and separated by hyphens, resembling a kind of kebab skewer.

Suppose you have a class you want to call "main header". If you use kebab-case, you'd write it as main-header. There are also other styles of naming, such as camelCase, PascalCase, snake_case, etc.

Here's how you'd write "main header" in these different styles:

• kebab-case: main-header

• camelCase: mainHeader

• PascalCase: MainHeader

• snake_case: main_header

Why use kebab-case for CSS?

• It's considered more readable, especially for CSS class and id names.

• It helps maintain consistency in your code, which makes it easier to work on projects with others or return to your code after some time.

• Using one consistent style helps prevent mistakes and confusion, as you just saw in your lesson's bad example where mixed naming conventions were used.

Hope this made it clear! Feel free to ask if there's anything else you'd like to know. 😊