# css
**Responsive Design**
* Code first for desktop
* Adapt to mobile with media queries(@media)
* Good for SEO
* Site with a lot of information
---
**Mobile-First Design**
* Code design first for mobile
* Adapt to desktop with media queries (@media)
* Less complicated code
* For mobile - oriented apps
---
---
**What is BEM?**
BEM standarts for Block, Element, and Modifier. It’s a CSS naming convention for writing cleaner and more readable CSS classes.
Blocks are named as standard CSS classes.
---
**What is a Block?**
* independent
* reusable
* usually bigger components of a webpage: (nav, header, etc)
* Blocks are named as standard CSS classes (.block)
---
**Elements**
* Are children of blocks
* Can only have 1 parent Block
* Can’t be used independently outside of that block
---
**Modifiers**
* represent different states or styles of classes.
* can be used both for blocks or elements.
* In HTML a modifier must be used together with its Block
* form form--large (with block)
* form__button form__button--red (with element)
---
**How it looks in CSS?**
{"metaMigratedAt":"2023-06-14T23:55:44.254Z","metaMigratedFrom":"Content","title":"css","breaks":true,"contributors":"[{\"id\":\"99016c6a-adc6-4e11-896b-5357d25cc3ed\",\"add\":1892,\"del\":697}]"}