Skip to content
Nesting rules:
- style components based on what they are, not where they are
- Don’t use the same class for both style and behavior. Example: .btn-delete and .js-btn-delete
- do not use IDs in nesting; use classes instead; more than one same ID makes page not valid and it is hard to select few similar elements with css or javascript; (bad: #title; good: .title)
- do not use !important
- do not use tags in nesting; use only classes; it is easier to change tags in template later; (bad: div.title; good: .title - because div.title could be changed to section.title in future)
- do not use "_" (underscore) in classes; use "-" (hyphen) instead; (bad: .main_title; good: .main-title)
- do not attach javascript listeners for existing classes because it makes tight coupling and classes can be renamed in future and the functionality will be broken. Better add new classes with 'js-' prefix and attach javascript listeners to them. For example: '.js-add-new'
- do not use '>' in css selectors; For example you have selector: 'p > a' and if somebody will wrap a tag with strong tag your selector will not work anymore
- a heading should not become a heading in another part of the page
- class names should be abstract; what is red today could be blue in future; (bad: .red-block; good: .news-block;)
- do not use "ads" in class names because these blocks will be hidden by AdBlock
- namespaces structure: .footer-wrap, .footer-left, .footer-right
- use normalize.css instead of reset.css;
- always add styles for :hover, :active and :focus states
Nesting links: