# Advanced CSS and SASS Course

## I. How CSS works: a look behind the scenes

## Importance > Specificity > Source Order
- Importance:
1. User !imporatnt declarations
2. Author !important declarations
3. Author declaration
4. User declaration
5. Default browser declarations
- Specificity
(inline, IDs, Classes/Pseudo-classes/Attribute, Elements)
e.g. (0,1,2,2)
- Source order
The last declaration will be used if all before are equal

### REMEMBER!!!
- CSS declarations marked with !important have the highest priority;
- Only use !important as a last resource - more maintanable code
- Inline styles will always have priority over styles in external stylesheets
- Selector that contains 1 ID is more specific than one with 1000 classes
- A selector that contains 1 class is more specific than one with 1000 elements
- Universal selector * has no specificity value (0,0,0,0);
- Rely more on specificity than on the order of selectors;
- Rely on order when using 3rd-party stylesheets - always put your author stylesheet last.

## How CSS values are processed
- % (fonts) x% * parent's computed font-size
- % (lengths) x% * parent's computed **width**
**Font-based**
- em (font) x * **parent** computed font-size 
- em (lengths) x * **current element** computed font-size
- rem x * **root** computed font-size
**WHY USE em's & rem's**
- more flexibility & robustness in RWD if we increase font-size the elements will increase accordingly

**Viewport-based**
- vh - x * 1% of viewport **height**
- vw - x * 1% of viewport **width**

### REMEMBER!!!
- property has initial value, used if nothing else declared (if there is no inheritance)
- **root-fontsize** for each page (16px usually)
- percentages and relative values are always converted to pixels
- percentages are measured relative to their parent's **font-size**, if used to specify *font-size*
- percentages are measured relative to their parent's **width**, if used to specify lengths
- **em** are measured relative to their **parent** *font-size*, if used to specify *font-size*
- **em** are measured relative to the **current** *font-size*, if used to specify lenghts
- **rem** are always measured relative to the **document's root** *font-size*
- **vh** and **vw** are % measurements of the viewport's *height* and *width*

## How CSS works: inheritance in CSS 
- inheritance passes the values for some specific properties from parents to children - **more maintainable code**
- properties related to **text** are inherited: *font-family*, *font-size*, *color*
- **computed value** is what gets inherited, **not** the declared value
- inheritance of property only works if no on declares a value for that property
- the *inherit* keyword forces inheritance on a ceratin property.
- the *initial* keyword resets a property to its initial value.


# II. LAYOUT
### BOX TYPES: INLINE, BLOCK-LEVEL, INLINE-BLOCK
1. Block-level boxes (display: block, flex, list-item, table)
- visually blocks
- **100% parent's width**
- line break one after another
- **box model applies as showed**
2. Inline boxes (display: inline)
- content distributed in lines
- **occupies only content's space**
- no line-breaks
- no heights & widths
3. Inline-block boxes (display: inline-block)
- mix of block & inline
- occupies only 
- **no line-breaks**
- **box-model applies as showed**
- paddings and margins only horizontal (left and right)

### POSITIONING SCHEMES: NORMAL, ABSOLUTE, FLOATS
1. Normal flow (Default, position: relative)
- default positioning scheme
- **NOT** floated
- **NOT** absolutely positioned
- Elements laid out according to their source order
2. Floats (float: left, float: right)
- **Element is removed from the normal flow**
- text and inline elements will wrap around the floated element
- the container will not adjust its height to the element
3. Absolute positioning (position: absolute, position: fixed)
- **Element is removed from the normal flow**
- no impact on surrounding content or elements
- we use top, bottom, left and right to offset the element from its relatively positioned container

### STACKING CONTEXTS: 
- are like layers 
z-index: 3; position: relative -> TOP
z-index: 2; position: absolute -> MIDDLE
z-index: 1; position: relative -> BOTTOM

# III. BEM
- BLOCK: standalone omponent that is meaningful on its own 
- ELEMENT: part of a block that has no standalone meaning
- MODIFIER: a different version of a block or an element

# IV. ARCHITECTING FILES AND FOLDERS
7-1 pattern
- 7 different wolders for partial Sass files (base, components, layouts, pages, themes, abstracts - variables&mixins, vendors)
- 1 main Sass file to import all other files into a compiled CSS stylesheet

# V. Sass 
Pen: https://codepen.io/anon/pen/pVggor?editors=1100#0