Introdução
Nomear componentes quando estilizamos nosso site/app pode parecer uma tarefa fácil para alguns, mas vira uma dor de cabeça se não estamos acostumados.
Afinal, a gente tem que pensar que:
- Outros devs tem que encontrar esse componente facilmente
- Eu tenho que lembrar do nome quando for dar manutenção
- Perder muito tempo nisso é tempo desperdiçado
- Se ficar confuso depois, vai precisar refatorar, perdendo ainda mais tempo 🤦♂️
Pensando nisso, elaborei essa lista de possíveis nomes que você pode dar para seus componentes CSS, dependendo do contexto.
A ideia é que você possa usar essas classes quando estiver criando componentes com a metodologia BEM, mas isso pode ser adaptado para outras metodologias.
Assim, você pode poupar o seu tempo pensando em nome de classes e focar no que realmente importa.
Layout
Classes usadas para determinar características de layout como tamanho e divisões entre conteúdos, margens, espaçamento, etc.
.container.wrapper.outer.inner.row.col
Seções Principais
Classes usadas para subdividir as páginas, esses componentes normalmente vão aparecer somente uma vez por página.
.page.header.main.hero.intro.section-[alguma coisa].footer
O Holy Grail design é um exemplo de seções principais de um site.
Componentes de Página
Classes usadas para definir componentes estruturais que podem aparecer várias vezes na mesma página.
.article.aside.box.bio.block.callout.card.content.gallery.lockup.info-box.menu.modal.panel.popup.post.profile.section.sidebar.video-box
Navegação
Classes para conjunto de links ou botões de navegação.
Nomes genéricos
.nav.nav-tools.nav-utilities.nav-menu
Nomes por relevância
.main-nav.primary-nav.secondary-nav
Nomes por posicionamento
.top-nav.bottom-nav.header-nav.sidebar-nav.footer-nav
Nomes por contexto
.dashboard-nav.site-nav.user-nav.***-nav
Listas
Classes para listas de elementos ou conjunto de componentes.
Nomes genéricos
.list.list-links.list-images.feed
Nomes por características
.ordered-list.numbered-list.unordered-list.floating-list
Nomes por contexto
.contact-list.work-list.products-list.users-list.***-list
Componentes
Classes para elementos em geral, a combinação e agrupamento desses elementos formam componentes maiores.
.accordion.avatar.background.badge.bar.breadcrumbs.btn(.menu-btn,.submit-btn, etc).button.carousel.copyrights.cta.cta-link.divider.dropdown.figure.ico.icon.illustration.image.label.link.locations.logo.map.mask.media.message.newsletter.overlay.pagination.parallax.photo.pic.picture.poster.product.project.ribbon.sitemap.social.tabs.tag.teaser.testimonial.thumb.thumbnail.tooltip.user.video
Formulários
Classes para formulários e seus campos.
Nomes genéricos
.form.field.input.control.label
Nomes por tipo
Nesse caso, usando modificadores do BEM.
.field--text.field--number.field--radio.field--checkbox
Nomes por contexto
.contact-form.login-form.sign-up-form.newsletter-form.***-form.submit-btn.cancel-btn
Texto
Classes para estilizar textos que são usados por todo o site/app.
.title.subtitle.suptitle.head.heading.text.content-text.description.category
Elementos aninhados
Sufixos de classe para serem usados em componentes filhos quando usamos a metodologia BEM.
Basicamente, todo nome de classe citado até agora pode se tornar um sufixo quando utilizado como filho de um elemento.
Sufixos estruturais
&__actions&__content&__footer&__head&__header&__inner&__item&__row
Sufixos de texto
&__title&__subtitle&__suptitle&__link&__text
Sufixos de contexto
&__cta&__name&__description&__details&__media&__social
Indicar Estado
Classes que normalmente são adicionadas/removidas por JavaScript e servem para indicar um estado diferente em que o componente se encontra.
.is-active.is-animating.is-closed.is-disabled.is-empty.is-expanded.is-fixed.is-loaded.is-loading.is-open.is-scrolling.is-sticky
Conclusão
Como você pode perceber, os nomes estão em inglês. Você vai encontrar na maioria dos lugares a nomenclatura assim, é o padrão.
Certamente você também deve divergir em relação a alguns nomes e categorias, mas a ideia aqui é mais ser uma lista de utilidades, sem certo ou errado.
Se tiver mais nomes de classes para inserir, fique à vontade e seja bem-vindo para deixar sua contribuição nos comentários aqui embaixo.
Até o próximo artigo!
