# CSS / SCSS Udemy course

## General Advice

- set the boxsizing property on the `*`,`*::after`, and `*::before` selectors. Then use the body tag to flow inheritance down to all elements.

```scss
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  color: #777;
  padding: 3rem;
  line-height: 1.7;
  box-sizing: border-box;
}
```

- Use rem units where ever you would use a px unit. Set the rem on html as a percentage to allow user styles to override yours, but keep the default a multiple of 10. Since most browsers are 16px default for rem 10/16 = 62.25%.

```scss
html {
  // Set's the rem to 10px in most browsers (16px)
  font-size: 62.5%;
}
```

## Box types

Since all content in the browser follows the box model you must have a solid understanding of the box types available to you. Box type is defined by the `display` property, and all elements have default value.

### Block-level

`display: block;`

- Elements formated visually as blocks
- 100% of parents width
- stacked vertically, one after another. Creating line-breaks immediately after thier appearnce
- `display: flex;`, `display: list-item;`, `display: table;` will all follow the Block type.

### Inline boxes

`display: inline;`

- Content is distributed in lines
- Occupies only content's space. (so abides by padding.)
- No line-breaks
- No heights, and widths
- Padding and margins only horizontal (left/right)

### Inline-block boxes

`display: inline-block;`

- A mix of block and inline
- Occupies only content space
- No line-breaks
- Box model applies

## Positioning schems

1. Normal flow
2. Floats
3. Absolute positioning

### Normal Flow

- Default positioning scheme
- NOT floated
- NOT absolutely positioned
- Elements laid out according to thier soure order
- `postion: relative;` property will still cause the element to follow Normal Flow rules.

### Floats

`float: left;` `float: right;`

- Element is removed from the normal flow shifting to the left or right as far as possible to the edge of it's containing element.
- Text and inline elements will wrap around the floated elements
- The container will **not** adjust its height to the element. This is why it is common to see clear fixes used in conjunction with floats

### Absolute

`position: absolute;`, `postion: fixed;`

- Element is removed from the normal flow
- No impact on surrounding content or elements. Can even overlap them, this is where under standing the **stacking context** is important
- We use `top`, `bottom`, `left`, and `right` to offset the element from it's relatively positioned container. The render will search up the dom for a parent element containing `position: relative`. It is this element that is treated as the work coordinate system and from which you offsets are relative against.

#### Stacking context

Determines in which order elements are rendered on the page. The `z-index` is the most common way to create a new stacking context, but there are other ways also. You can use the `z-index` of either `postion: relative;` or `position: absolute;` elements. Higher `z-index` values will appear on top of lower ones.

_Note_: Opacity values different from one, a transform, filter, etc will also create new stacking contexts.

### Building maintainable code

#### Think

- _Think_ about the layout of your webpage or app before writing code
- Using a component-driven design we can think of our app as being made up of multiple components being held together by the layout of our page
- Components should be re-usable across a project, and between different projects
- Components should be indepent allowing us to use them anywhere on the page. In other words, they should not depend on parent elements.

#### Build

- _Build_ your layout in HTML and CSS with a consistent structure and class naming conventions
- There are plenty of established naming conventions. For this course we want to follow _Block Elmenent Modifier_(BEM).

  - Follows a convention like `.block {}`, `.block__element {}`. `.block__element--modifier {}`
  - A _block_ is a standalone component that is meaningful on its own. You can nest componenets inside of each other.
  - An _element_ is part of a block that has no standalone meaning. This is not an "html" element per'se. It could be a div that is used as an info container in you, or a div that is being used to convey statistics like stars, likes, etc for the block. If placed outside of the block the context of it is lost. The block name will always appear in all the class names of the elements/modifiers in the block. This creates classes with really low specificities and are also never nested.
  - The _modifier_ is a flag that we can put on a block or element to make it different from the other elements. Like a different version. For example `btn--round` is a modifier to the `btn` block that makes it different from the default.
  - Ex: `.recipe`, `.recipe__hero`, `.recipe__img`, `.recipe__stat-value`

#### Architect

- _Architect_ a logical structure for your CSS with files and folders
- In this course we will follow the 7-1 pattern for CSS. _Note_ there are other patterns like ITCSS or S Max
  - 7 different folders for partial Sass files, and 1 main Sass file to import all other files into a compiled CSS stylesheet. _I don't know how this fits with a compenent framework like vue_. You could just use [BEM class names in the componenet definitions](https://medium.com/@seanmcp/how-and-when-to-use-bem-in-react-edabad2b805a)
    |Folder | Description |
    |-------|-------------|
    |base/ | Where we put the basic product definitions.|
    | components/ | |
    | layout/ | |
    | pages/ | |
    | themes/ | |
    | abstracts/ | |
    | vendors/ | |