CSS Selectors, Box Model, Flexbox, and Responsive Design

CSS Selectors

/* Specificity (low to high): */
/* element < .class < #id < inline < !important */

p { color: blue; }                    /* specificity: 0,0,1 */
.product-name { color: green; }       /* specificity: 0,1,0 */
#header .nav a { color: red; }        /* specificity: 0,1,2 */

/* Attribute selectors */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"] { color: green; }   /* starts with */
a[href$=".pdf"] { color: red; }      /* ends with */

/* Pseudo-classes */
a:hover { color: blue; }              /* mouse over */
input:focus { border-color: #0066cc; } /* focused */
li:nth-child(even) { background: #f5f5f5; } /* every other */

/* Pseudo-elements */
.required::after {
    content: " *";
    color: red;
}
blockquote::before {
    content: "\201C"; /* left double quote */
    font-size: 2em;
}

The Box Model

Every HTML element is a box with four areas:

+-------------------------------------------+
|                 MARGIN                      |
|  +--------------------------------------+ |
|  |              BORDER                   | |
|  |  +--------------------------------+  | |
|  |  |          PADDING               |  | |
|  |  |  +--------------------------+  |  | |
|  |  |  |        CONTENT           |  |  | |
|  |  |  +--------------------------+  |  | |
|  |  +--------------------------------+  | |
|  +--------------------------------------+ |
+-------------------------------------------+

/* Standard box model */
.product-card {
    width: 300px;          /* content width */
    padding: 20px;        /* space inside border */
    border: 1px solid #ddd;
    margin: 15px;          /* space outside border */
    /* Total width = 300 + 20*2 + 1*2 + 15*2 = 372px */
}

/* Border-box (recommended) */
.product-card {
    box-sizing: border-box;
    width: 300px;          /* total width including padding and border */
    padding: 20px;
    border: 1px solid #ddd;
    margin: 15px;
    /* Total width = 300px + margin only */
}

/* Global border-box */
*, *::before, *::after {
    box-sizing: border-box;
}

Common CSS Patterns

/* Centering */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Text truncation */
.product-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Sticky footer */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

Magento LESS Variables

Magento uses LESS instead of plain CSS:

// Magento LESS variables (lib/web/css/source/lib/variables.less)
@primary__color: #1979c2;
@secondary__color: #f26322;
@page__background-color: #ffffff;
@page__width: 1280px;
@indent__base: 20px;

// Using variables in custom CSS
.product-card {
    background: @page__background-color;
    border: 1px solid darken(@page__background-color, 10%);
    max-width: @page__width;
    margin: 0 auto;
    padding: @indent__base;
}

Flexbox Fundamentals

Flexbox provides efficient alignment and distribution of space among items in a container.

Flex Container Properties

/* Enable flexbox */
.product-grid {
    display: flex;
    flex-wrap: wrap;           /* Allow items to wrap */
    gap: 20px;                /* Space between items */
    justify-content: center;   /* Horizontal alignment */
    align-items: stretch;     /* Vertical alignment */
}

/* justify-content options */
justify-content: flex-start;    /* Items at start */
justify-content: flex-end;      /* Items at end */
justify-content: center;        /* Items centered */
justify-content: space-between; /* Equal space between */
justify-content: space-around;  /* Equal space around */
justify-content: space-evenly;  /* Equal space everywhere */

/* align-items options */
align-items: stretch;    /* Fill container height */
align-items: flex-start; /* Align to top */
align-items: flex-end;   /* Align to bottom */
align-items: center;     /* Center vertically */
align-items: baseline;   /* Align text baselines */

Flex Item Properties

.product-item {
    flex: 1;          /* grow, shrink, basis */
    /* flex: 1 1 0 = grow equally, shrink equally, start from 0 width */
}

.product-item.featured {
    flex: 2;          /* Takes twice the space */
}

.product-item.sidebar {
    flex: 0 0 300px;  /* Don't grow, don't shrink, fixed 300px */
}

/* Individual alignment */
.product-item.promo {
    align-self: flex-end; /* Override container's align-items */
}

Practical Flexbox Examples

/* Product card layout */
.product-card {
    display: flex;
    flex-direction: column;  /* Stack vertically */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.product-card .image {
    height: 200px;
    object-fit: cover;
}

.product-card .content {
    flex: 1;  /* Take remaining space */
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.product-card .price {
    margin-top: auto;  /* Push to bottom */
    font-weight: bold;
}

/* Navigation bar */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 64px;
}

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
}

/* Centered content */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

Flexbox vs Display Properties

CSS Grid

Grid provides two-dimensional layout capabilities (rows AND columns).

/* Product grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
    padding: 24px;
}

/* Fixed columns */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr 300px; /* sidebar, main, aside */
    gap: 20px;
    min-height: 100vh;
}

/* Named areas */
.page-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav    main   sidebar"
        "footer footer footer";
    grid-template-columns: 200px 1fr 250px;
    grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

Responsive Design

Media Queries

/* Mobile-first approach (recommended) */
/* Base styles for mobile */
.product-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .product-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .product-item {
        flex: 0 0 calc(50% - 8px);
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .product-item {
        flex: 0 0 calc(25% - 12px);
    }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
    .page-wrapper {
        max-width: 1440px;
        margin: 0 auto;
    }
}

Responsive Units

/* Different units */
.container {
    width: 100%;            /* Percentage of parent */
    max-width: 1200px;      /* Maximum width */
    padding: 2rem;          /* Relative to font size */
    font-size: 1rem;        /* 16px default */
    margin: 0 auto;
}

/* Viewport units */
.hero {
    min-height: 100vh;      /* Full viewport height */
    width: 100vw;           /* Full viewport width */
    font-size: 5vw;         /* 5% of viewport width */
}

/* Clamp for fluid typography */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    /* Minimum 24px, preferred 4vw, maximum 48px */
}

Magento Theme Customization

// Custom LESS for Magento theme
// web/css/source/_extend.less

// Override Magento variables
@primary__color: #e74c3c;
@page__width: 1400px;

// Custom product grid
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(@product-card-width, 1fr));
    gap: @indent__base;
}

.product-card {
    border: 1px solid @color-gray-light2;
    border-radius: @border-radius-base;
    transition: box-shadow 0.3s;

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

// Responsive breakpoints
@media (max-width: @screen__m) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: @screen__s) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

Key Takeaway

Use Flexbox for 1D layouts (rows or columns) and CSS Grid for 2D layouts. Always use mobile-first responsive design with min-width media queries. Magento uses LESS for CSS preprocessing with predefined variables.