advanced-css-and-scss/README.md

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.

*,
*::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%.

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

    Folder	Description
    base/	Where we put the basic product definitions.
    components/
    layout/
    pages/
    themes/
    abstracts/
    vendors/