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