- Avoid using numbers in class names.
<!-- ❌ Incorrect --> <div class="element-1">...</div> <!-- ✅ Correct --> <div class="first-element">...</div>
- Write class names in lowercase using
kebab-casenotation, where each word is separated by a hyphen.<!-- ❌ Incorrect --> <div class="userinfo">...</div> <div class="Userinfo">...</div> <div class="userInfo">...</div> <div class="UserInfo">...</div> <div class="USERINFO">...</div> <div class="USER-INFO">...</div> <div class="USER_INFO">...</div> <!-- ✅ Correct --> <div class="user-info">...</div>
- Class names should not consist of a single letter.
<!-- ❌ Incorrect --> <div class="w">...</div> <!-- ✅ Correct --> <div class="wrapper">...</div>
- Avoid excessive abbreviations in class names; use
buttoninstead ofbtnandlinkinstead oflnk. Remember, code is written once, but read by you and other developers much more often, so saving characters is not advisable.<!-- ❌ Incorrect --> <button class="btn">...</button> <a class="lnk">...</a> <!-- ✅ Correct --> <button class="button">...</button> <a class="link">...</a>
- In most cases, class names should not duplicate the tag name of the element to which the class is applied.
<!-- ❌ Incorrect --> <p class="p">...</p> <div class="div">...</div> <a class="a">...</a> <!-- ✅ Correct --> <p class="paragraph">...</p> <div class="wrapper">...</div> <a class="link">...</a>
- Class names should generally reflect the function or style of the element.
<!-- ❌ Incorrect --> <button class="some-button">Red Button</button> <div class="some-block">Tooltip</div> <!-- ✅ Correct --> <button class="red-button">Red Button</button> <div class="tooltip">Tooltip</div>
- Class names can consist of multiple words; however, it is logical that the fewer words in a class name, the easier it is to write, read, and remember.
<!-- ✅ Acceptable --> <span class="user-name-first-letter">A</span>
- In class names, you can and should combine words if the context of the element requires it (e.g., a block with the class
usermay contain blocks with the classesuser-imageanduser-name, anduser-namemay contain an element with the classuser-name-first-letter).<!-- ✅ Correct --> <div class="user"> <img class="user-image" /> <div class="user-name"> <span class="user-name-first-letter">A</span>lexander </div> </div>
- Often, it's better to use nouns for class names, and in rare cases, adjectives when the class serves as a modifier of a component. Verbs are generally not used as class names.
<!-- ❌ Incorrect --> <a class="go-back">...</a> <button class="submit">...</button> <form class="create-user">...</form> <div class="run-slider">...</div> <!-- ✅ Correct --> <a class="go-back-link">...</a> <button class="submit-button">...</button> <form class="create-user-form">...</form> <div class="slider">...</div> <!-- ⚠️ Also Correct --> <button class="button red wide bold">...</button> <section class="section large-padding-y">...</section>
- Every class in the project should be justified. For example, if you have 5 sections that are absolutely identical in style but have different content, there is no need to invent a separate class for each section; it's better to use a unified class.
<!-- ❌ Incorrect --> <section class="banner">...</section> <section class="features">...</section> <section class="catalog">...</section> <section class="about">...</section> <section class="contacts">...</section> <style> .banner { padding-block: 30px } .features { padding-block: 30px } .catalog { padding-block: 30px } .about { padding-block: 30px } .contacts { padding-block: 30px } </style> <!-- ✅ Correct --> <section class="section">...</section> <section class="section">...</section> <section class="section">...</section> <section class="section">...</section> <section class="section">...</section> <style> .section { padding-block: 30px } </style>
page—<html>or<body>header—<header>content,main—<main>footer—<footer>section—<section>aside,sidebar,widget—<aside>nav,menu,navigation—<nav>
inner,body— auxiliary elementwrapper,wrap— auxiliary wrapper elementcontainer— container limiting the width of the contentgrid— table-like gridrow— row in a gridcolumn,col,cel— column (cell) in a grid
list,items—<ul>,<ol>, and<dl>elementsitem—<li>element
card—<article>element
imageimgpicturepicthumbnailthumbavatarlogoicon
title,subtitle,heading,subheading,headline,subject,caption,label— elements from<h1>to<h6>slogan,description,text— slogans and descriptionsblockquote,quote— quotescopyright— copyrightlink— linkscode,snippet— code snippets
form—<form>elementform-group—<fieldset>elementform-group-name,form-group-title,form-group-label—<legend>elementform-item— structural form element wrapping input elements
field— root<div>element of an input field componentfield-label—<label>elementfield-control—<input />,<textarea>,<select>elements
checkbox— root<label>element of a checkbox componentcheckbox-control—<input />element of a checkbox componentcheckbox-emulator—<span>element of a checkbox component for emulating the "square"checkbox-label—<span>element of a checkbox component for labeling
radios— root<fieldset>element of a radio button componentradios-label—<legend>element of a radio button component
button—<button>elementdropdown— dropdown listaccordion,spoiler— accordion componentmodal,popup— modal windowoverlay,backdrop— darkening background (e.g., behind modal windows)tooltip,hint— tooltip, popup hintslider,carousel— sliderpagination— pagination (horizontal menu with page numbers and left-right arrows)breadcrumbs— breadcrumb navigation (hierarchical navigation of a web application, often following the header)basket,cart— shopping cartsummary,total,amount— sum of something (e.g., total order amount)search,quick-search— search formuser— element with user datafeatures,advantages,benefits— element with a list of product or service featuressocials,soc1als— social networks
smalltinymediumbasebiglargehugenarrowwide
has-iconhas-errorhas-underline
is-current— current menu itemis-active— active buttonis-visible,is-shown— visible tooltipis-hidden,hidden— hidden informationis-open— open modal windowis-expanded— expanded dropdown listis-invalid,is-error— input field with incorrect input datawarning— warningalert,notification— notificationsuccess— success status of somethingloading,processing,pending— loading status