---
# System prepended metadata

title: CSS Style Guide

---

# CSS Style Guide

This project is going to follow **BEM-like naming conventions for CSS**.

This means **dropping tag names and IDs from your CSS completely**, using only class names. 
- Keep the names of blocks, elements and modifiers short and semantic.
- Use only Latin letters, dashes and digits.
- Do not use underscores (_), which are reserved as “separator” characters.
- All strings in classes are delimited with a hyphen (-) (do not use camelCase):

        .page-head { }
BLOCKS #

- A block is an independent entity with its own meaning that represents a piece of interface on a page:

        a heading,
        a button,
        a navigation menu.
        
- Block containers get a CSS class of a prefix and a block name:

        .b-heading
        .b-text-input

ELEMENTS #
- An element is a part of a block, tied to it semantically and functionally. It has no meaning outside of the block it belongs to. 
- Element containers within a block get CSS classes consisting of their block class, two underscores and the element’s name:


        .b-text-input__label
        .b-text-input__text-field


MODIFIERS #
- Modifiers are flags set on blocks or elements; they define properties or states -  — somewhat similar to HTML attributes, but not exactly the same.


Sources: 

https://cssguidelin.es/

https://www.smashingmagazine.com/2014/07/bem-methodology-for-small-projects/




