Sabrina Abrodi

CSS for a Javascript developer

sabrina abrodi's photo
sabrina abrodi
·

4 min read

Table of contents

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.

CSSFrontend DevelopmentJavaScript