Frontend // Style

CSS &
ARCHITECTURE

Cascading Style Sheets control the presentation of the web. Modern CSS is a powerful layout engine that handles responsiveness, animation, and system-level architecture at scale.

The Cascade

Styles "cascade" down from generic to specific. Conflicts are resolved by Specificity. Understanding this hierarchy is the difference between writing clean code and fighting with `!important`.

100
ID (#id)
10
Class (.class)
1
Tag (div)

Layout Engines

Flexbox (1D)

Best for components. Aligning items in a single row or column. (e.g., Navbars, Cards)

Grid (2D)

Best for page layout. Handling rows and columns simultaneously. (e.g., Dashboards)

Mobile-First Design

Start with base styles for mobile, then use @media (min-width) to enhance for larger screens. It creates faster, simpler code.

Flex Engine

justify-content (Main Axis)
align-items (Cross Axis)
flex-direction
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
1
2
3
Main Axis ➝
Cross Axis ➝

Methodologies

BEMBlock Element Modifier

Naming convention to keep specificity low.

.card__button--active
Utility-FirstTailwind CSS

Composing designs directly in markup.

flex items-center p-4 bg-blue-500
CSS-in-JSStyled Components

Scoped styles tied to React components.

const Button = styled.div`...`