# CSS for a Javascript developer

## Introduction

A week ago, I completed the CSS for JavaScript Developers course, and it was a fun journey into the world of CSS. Throughout the course, I took copious notes to capture the key points and valuable insights that I gained. Here are my notes:

## **Styled-components**

* styled-components is a React library for CSS-in-JS.
    
* Uses tagged template literals for defining styled components.
    
* Automatically adds vendor prefixes for browser compatibility.
    
* "&" is the placeholder for referencing the generated class.
    
* Component names don't need to be globally unique.
    
* Supports CSS Nesting with the "&" selector.
    
* Offers benefits in specificity and scoping.
    

### **Component Libraries:**

* Reusable components for multiple applications.
    
* Ensures consistency and speeds up development.
    
* Can be used in both large organizations and small web apps.
    
* Design systems and design tokens play a role.
    
* CSS knowledge may become less critical.
    
* Pre-existing libraries like Material Design are available.
    
* Alternatives include Radix Primitives, Headless UI, Ariakit, and React Aria.
    

### **Breadcrumbs:**

* Navigation links showing content structure.
    
* Commonly found on e-commerce listing pages.
    
* Help navigate to parent or grandparent categories.
    
* Can be implemented as a React component.
    

### **Components:**

* Core options: variant and size props for specific styles.
    
* Composition with styled() for style combinations.
    
* Contextual styles based on component usage or nesting.
    
* Tradeoffs between managing styles and code complexity.
    
* Choose the appropriate styling method for the situation.
    
* Understanding the impact of styles on elements is crucial.
    

## **Flexbox:**

* CSS layout mode for controlling element distribution.
    
* Useful for aligning and spacing elements in one dimension.
    
* Complements CSS Grid for different layout needs.
    
* Activated by setting display: flex.
    
* Better browser support compared to CSS Grid.
    

## **Grid:**

* `display: grid;`
    
* By default, grid creates an implicit grid based on the number of children elements.
    
* Implicit grids fill the available space and stretch elements horizontally.
    
* Grid height can be fixed to control the behavior of rows.
    
* Grid auto flow property changes the flow direction of elements in the grid.
    
* Grid construction involves explicitly defining columns and their widths using the `grid-template-columns` property.
    
* Columns can have fixed widths or be flexible using the `fr` unit.
    
* Self-alignment properties `align-self` and `justify-self` can be used on individual grid items.
    
* Understanding grid tracks and lines helps in understanding the grid structure.
    

## **Align:**

* Flexbox provides alignment options like align-items and align-self.
    
* align-items: baseline aligns elements based on their baseline.
    
* Combining baseline and center alignment requires creative approaches.
    
* align-self allows specific children to have different alignment settings.
    
* Flexbox lacks justify-self for the primary axis.
    
* Chat interface example demonstrates Flexbox for conversation layout.
    

## **Calc:**

* `calc()` function for mathematical operations in CSS.
    
* Good browser support, even in older versions.
    
* Useful for unit conversion and dynamic color palettes.
    
* Allows fine-grained control over CSS gradients.
    
* Circular hue values in `calc()` calculations.
    

## **CSS Transitions:**

* Fundamental tool for creating smooth animations.
    
* Transition property glides elements between states.
    
* Control animation effects with properties and durations.
    
* Timing functions determine animation pace and style.
    
* Custom timing curves using cubic bézier functions.
    
* Transition delays solve issues like "doom flicker."
    
* Prevent unintended flickering with parent-child interactions.
    

## **CSS Keyframe Animations:**

* Defined using `@keyframes` at-rule.
    
* Specify intermediate states with keywords or percentages.
    
* Applied using the `animation` property.
    
* Control animation duration, timing, delay, and iteration count.
    
* Timing functions control animation acceleration and deceleration.
    
* Looping, multi-step, and pauseable animations.
    
* Shorthand syntax combines animation properties.
    

## **Dynamic Updates in Animations:**

* Trigger animations dynamically using the `animation` property.
    
* Update animation property with JavaScript.
    
* Pausing animations with `animation-play-state`.
    
* Good browser support, including older versions.
    
* Flexibility with `@keyframes` for various animations.
    
* Transitions suitable for smooth CSS value transitions.
    

## **Accessibility:**

* Animations can affect individuals differently.
    
* Reduce or disable animations for accessibility.
    
* Access user's animation preference using CSS media query "prefers-reduced-motion."
    
* Adjust animations based on user preference.
    
* Regular testing with reduced motion setting enabled.
    

## **Conclusion:**

In the week since completing the CSS for JavaScript Developers course, I've gained a deeper understanding of CSS and its integration with JavaScript. Whether you're a fellow developer looking to enhance your frontend skills or simply seeking a quick CSS refresh, I hope these bullet points prove useful to you.