It’s all boxes within boxes. Using a border or a background can help you visualize things.

The default is for css to size based on the content in the container. Default width is 100% of the parent. Don’t set fixed widths and heights if you can help it.

Whitespace is key.

<aside> 💡 Use IDs if you need JS to access it quickly, otherwise just use classes.

</aside>

<aside> 💡 A lot of classes can be a good thing! Gives you more control. (But consider reusability as well.)

</aside>

In the box model - the larger of the values will win out if there’s overlap.

Margin is on the outside of the box and padding is on the inside of the box.

Selectors

Shorthand

padding: [top] [right] [bottom] [left]:
padding: [top] [right/left] [bottom]; 
padding: [top/bottom] [right/left];

margin: [top] [right] [bottom] [left];
margin: [top] [right/left] [bottom]; 
margin: [top/bottom] [right/left];

lorem (emmet property to create filler text) 
lorem100 (create 100 characters of lorem)

What I’ll use all the time

// remove margins from headings
// use font as a variable; set body font to the main font that will be recurring 

<link rel="icon" href="<http://www.example.com/myicon.ico>"/> //Sets icon on tab
// Research this more 

* {
   box-sizing: border-box;
}

body, html {
margin: 0;
padding: 0;
}

img {
display: block
}

//Make font accessible while also being easier to code (SCSS)
$font-size-xs: 0.75rem;
$font-size-sm: 0.875rem;
$font-size-md: 1rem;
$font-size-lg: 1.125rem;
$font-size-xl: 1.3125rem;
$font-size-2xl: 1.5rem;
$font-size-3xl: 2.652rem;
$font-size-4xl: 4rem;

[class ^="item"]{ 
} // Apply properties to classes with similar class names

element1 + element 2 {
	// apply styling to element 2 that is immediately after element 1
}

margin: 0 auto; // Easy way to center something. 0 margin top/bottom,
// auto marign on left and right
// easier to do with a flex container! Set flex-grow to 1 and then 
// you will have the space to use auto margin

list-style: none; // Remove list shit

border-radius: 20px // Make rounded borders. 20 px is a good starting point

Organization

-OOCSS (Object oriented CSS)

Two main ideas:

-separation of structure and design

Separating structure and skin can also mean using classes to name your objects and their components, rather than relying solely on the semantics of HTML. For example, the media object is named with class="media", and its components are named with class="img" (for the image/video component) and class="bd" (for the body/text component).