CSS Hard Skills — page 1

CSS

Hard

Skills

DO M AI N

O VE RVI E W

DO MAIN

SKILLS

PRIMARY

FO CUS

1.

Core

Layout

&

Positioning

7

Box

model

·

Flexbox

·

Grid

·

positioning

·

logical

properties

2.

Selectors

,

Specificity

&

the

Cascade

6

Selector

syntax

·

cascade

order

·

inheritance

·

pseudo

-

classes

and

elements

· @

layer

3.

Custom

Properties

&

Modern

CSS

6

Custom

properties

·

math

functions

·

container

queries

·

nesting

·

subgrid

4.

Responsive

&

Adaptive

Design

7

Media

queries

·

mobile

-

first

·

fluid

type

·

viewport

units

·

preference

queries

5.

Typography

&

Visual

Styling

7

Font

loading

·

variable

fonts

·

vertical

rhythm

·

colour

·

backgrounds

·

shadows

and

masks

6.

Animation

&

Motion

6

Transitions

·

keyframes

·

transforms

·

scroll

timelines

·

compositor

performance

7.

Architecture

&

Methodology

6

BEM

·

utility

-

first

·

ITCSS

·

design

tokens

·

scoped

styling

·

file

organisation

8.

Tooling

&

Preprocessing

6

Sass

·

PostCSS

·

Autoprefixer

·

Lightning

CSS

·

Stylelint

·

bundler

integration

9.

Performance

&

Optimization

6

Critical

CSS

·

purging

·

minification

·

selector

cost

·

reflow

and

layout

thrashing

10.

Accessibility

,

Debugging

&

Quality

6

Focus

·

WCAG

contrast

·

screen

-

reader

-

safe

styling

·

DevTools

·

cross

-

browser

·

print

Total

63

Ten

domains

spanning

authoring

,

architecture

,

tooling

and

delivery

1.

Core

Layout

&

Positioning

7

SKILLS

01

Box

Model

EXPERT

Controls

how

width

,

height

,

padding

,

borders

and

margins

resolve

for

every

element

;

border

-

box

sizing

is

applied

globally

in

every

production

reset

.

width

height

padding

margin

box-sizing

overflow

1 / 10

CSS Hard Skills — page 2

02

Flexbox

EXPERT

One

-

dimensional

distribution

across

rows

or

columns

:

flexible

sizing

,

wrapping

,

main

-

and

cross

-

axis

alignment

,

and

gap

-

based

spacing

.

display: flex

flex

flex-direction

justify-content

align-items

gap

03

CSS

Grid

EXPERT

Two

-

dimensional

layout

using

explicit

tracks

,

named

lines

,

auto

-

placement

,

span

control

and

intrinsic

track

sizing

functions

.

grid-template-columns

grid-template-areas

grid-area

repeat()

minmax()

auto-fit

04

Positioning

&

Stacking

Context

AD VANCED

Relative

,

absolute

,

fixed

and

sticky

positioning

,

plus

deliberate

stacking

-

context

creation

and

containment

to

avoid

z

-

index

escalation

.

position

inset

z-index

isolation

contain

05

Logical

Properties

PROFICIENT

Flow

-

relative

spacing

,

sizing

and

borders

that

survive

right

-

to

-

left

locales

and

vertical

writing

modes

without

duplicated

rules

.

margin-inline

padding-block

inset-inline-start

border-start-start-radius

06

Multi

-

Column

Layout

PROFICIENT

Balanced

editorial

column

flow

with

spanning

elements

,

column

rules

and

controlled

break

behaviour

inside

columns

.

columns

column-gap

column-rule

column-span

break-inside

07

Float

,

Clear

&

Legacy

Layout

PROFICIENT

Float

-

based

text

wrapping

and

clearfix

patterns

,

plus

migrating

legacy

float

and

table

layouts

onto

Flexbox

and

Grid

.

float

clear

overflow

shape-outside

2.

Selectors

,

Specificity

&

the

Cascade

6

SKILLS

01

Selector

Syntax

EXPERT

Type

,

class

,

ID

,

attribute

and

combinator

selectors

,

including

the

functional

pseudo

-

class

family

for

relational

and

list

matching

.

:is()

:where()

:not()

:has()

[data-*]

>

+

~

2 / 10

CSS Hard Skills — page 3

02

Specificity

&

Cascade

Order

EXPERT

Predictable

conflict

resolution

across

origin

,

layer

,

importance

and

specificity

;

keeping

specificity

flat

enough

that

overrides

never

require

escalation

.

!important

@

layer

cascade order

specificity

03

Inheritance

&

Value

Handling

AD VANCED

Explicit

control

over

which

values

inherit

,

reset

or

follow

the

parent

,

including

reverted

cascade

values

for

component

isolation

.

inherit

initial

unset

revert

revert-layer

04

Pseudo

-

classes

EXPERT

State

,

structural

and

interaction

styling

with

no

extra

markup

—

hover

,

focus

,

validation

states

and

nth

-

based

patterns

.

:hover

:focus-visible

:nth-child()

:checked

:invalid

05

Pseudo

-

elements

AD VANCED

Generated

content

,

decorative

layers

and

typographic

micro

-

styling

without

polluting

the

document

with

presentational

nodes

.

:

:before

:

:after

:

:selection

:

:first-line

:

:marker

06

Cascade

Layers

PROFICIENT

Explicit

priority

tiers

for

resets

,

vendor

styles

,

base

rules

and

components

in

large

codebases

,

removing

cross

-

team

specificity

wars

.

@

layer

layer()

@

import

..

. layer

3.

Custom

Properties

&

Modern

CSS

6

SKILLS

01

CSS

Custom

Properties

EXPERT

Runtime

variables

for

theming

,

scoping

and

state

;

declaring

typed

properties

for

animation

and

syntax

-

guarded

values

.

-

-token

var()

@

property

env()

02

Math

Functions

AD VANCED

Derived

and

fluid

values

computed

in

the

browser

rather

than

pre

-

computed

at

build

time

.

calc()

min()

max()

clamp()

round()

mod()

3 / 10

CSS Hard Skills — page 4

03

Container

Queries

PROFICIENT

Component

responsiveness

driven

by

the

size

of

the

parent

container

rather

than

the

viewport

,

enabling

truly

portable

components

.

container-type

container-name

@

container

cqi

cqb

04

Native

Nesting

PROFICIENT

Nested

rule

syntax

with

the

ampersand

parent

reference

,

including

nesting

of

at

-

rules

such

as

media

and

container

queries

.

&

nested selectors

nested at-rules

05

Subgrid

PROFICIENT

Inheriting

parent

grid

tracks

so

nested

components

align

their

content

to

the

outer

layout

instead

of

nesting

independent

grids

.

grid-template-columns: subgrid

grid-template-rows: subgrid

06

Modern

Value

Functions

&

Feature

Detection

PROFICIENT

Conditional

and

computed

values

resolved

at

parse

time

,

gated

behind

real

capability

checks

rather

than

user

-

agent

sniffing

.

@

supports

if()

color-mix()

light-dark()

attr()

4.

Responsive

&

Adaptive

Design

7

SKILLS

01

Media

Queries

EXPERT

Breakpoint

-

driven

adaptation

using

modern

range

syntax

and

capability

queries

for

pointer

and

hover

behaviour

.

@

media (min-width)

@

media (hover: hover)

@

media (pointer: coarse)

resolution

02

Mobile

-

First

Strategy

EXPERT

Small

-

screen

base

styles

with

progressive

enhancement

outward

,

rather

than

desktop

layouts

down

-

scaled

with

override

-

heavy

breakpoints

.

min-width

progressive enhancement

breakpoint tokens

03

Fluid

Typography

&

Spacing

AD VANCED

Continuous

scaling

between

defined

bounds

without

breakpoints

,

keeping

type

and

rhythm

proportional

from

320

px

to

ultrawide

.

clamp()

vw

rem

cqw

calc()

4 / 10

CSS Hard Skills — page 5

04

Viewport

Units

AD VANCED

Robust

full

-

height

sections

that

behave

correctly

against

mobile

browser

chrome

,

dynamic

toolbars

and

embedded

iframes

.

dvh

svh

lvh

vmin

vmax

05

User

-

Preference

Queries

AD VANCED

Honouring

OS

-

level

settings

for

theme

,

motion

,

contrast

and

transparency

so

the

interface

adapts

to

the

user

,

not

the

designer

.

prefers-color-scheme

prefers-reduced-motion

prefers-contrast

forced-colors

06

Aspect

Ratio

&

Intrinsic

Sizing

PROFICIENT

Reserving

space

for

media

before

it

loads

and

letting

content

determine

track

size

without

JavaScript

measurement

.

aspect-ratio

min-content

max-content

fit-content

07

Feature

Queries

&

Progressive

Enhancement

AD VANCED

Layered

enhancement

gated

on

actual

browser

support

,

so

modern

CSS

ships

to

capable

browsers

and

safe

fallbacks

cover

the

rest

.

@

supports (display: grid)

@

supports selector(:has(a))

5.

Typography

&

Visual

Styling

7

SKILLS

01

Font

Loading

AD VANCED

Declaring

web

fonts

with

modern

formats

,

subsetting

,

metric

-

matched

fallbacks

and

deliberate

control

over

flash

of

unstyled

or

invisible

text

.

@

font-face

font-display

unicode-range

size-adjust

woff2

02

Variable

Fonts

PROFICIENT

Axis

-

driven

weight

,

width

and

optical

sizing

from

a

single

file

,

animated

within

a

defined

range

rather

than

swapping

static

faces

.

font-variation-settings

font-optical-sizing

font-weight: 100 900

03

Text

Layout

&

Vertical

Rhythm

EXPERT

Consistent

baseline

rhythm

,

line

breaking

,

balanced

headings

,

hyphenation

and

vertical

alignment

of

mixed

-

size

text

.

line-height

letter-spacing

text-wrap: balance

hyphens

vertical-align

5 / 10

CSS Hard Skills — page 6

04

Modern

Colour

AD VANCED

Perceptually

uniform

colour

spaces

,

mixing

and

relative

colour

syntax

for

palettes

that

stay

consistent

across

themes

.

oklch()

lch()

color-mix()

relative colour syntax

color-scheme

05

Backgrounds

&

Gradients

AD VANCED

Layered

background

images

,

sizing

and

positioning

rules

,

gradient

functions

and

clipping

backgrounds

to

text

or

borders

.

background-image

linear-gradient()

radial-gradient()

background-size

background-clip

06

Borders

,

Radii

&

Outlines

AD VANCED

Non

-

layout

-

affecting

borders

,

asymmetric

radii

and

focus

-

safe

outlines

that

remain

visible

in

high

-

contrast

modes

.

border-radius

outline

outline-offset

border-image

07

Shadows

,

Filters

&

Masks

AD VANCED

Elevation

,

blur

,

backdrop

effects

and

non

-

rectangular

clipping

achieved

without

exporting

image

assets

.

box-shadow

filter

backdrop-filter

clip-path

mask-image

6.

Animation

&

Motion

6

SKILLS

01

Transitions

EXPERT

Interpolating

state

changes

with

tuned

duration

and

easing

,

transitioning

only

compositor

-

friendly

properties

and

respecting

layout

cost

.

transition

transition-timing-function

cubic-bezier()

steps()

02

Keyframe

Animations

AD VANCED

Multi

-

step

,

looping

and

sequenced

animation

with

direction

,

fill

-

mode

and

additive

compositing

control

.

@

keyframes

animation-*

animation-fill-mode

animation-composition

03

Transforms

AD VANCED

2

D

and

3

D

transforms

with

perspective

,

transform

-

origin

and

independent

translate

/

rotate

/

scale

properties

.

transform

translate

rotate

scale

perspective

6 / 10

CSS Hard Skills — page 7

04

Scroll

-

Driven

Animation

PROFICIENT

Progress

and

view

timelines

tied

to

scroll

position

,

replacing

JavaScript

scroll

listeners

with

declarative

timelines

.

animation-timeline

scroll()

view()

scroll-timeline

05

Motion

Performance

AD VANCED

Keeping

animation

on

the

compositor

thread

and

off

the

main

thread

to

hold

a

stable

60

fps

under

load

.

will-change

transform

opacity

contain

06

Reduced

Motion

AD VANCED

Shipping

motion

that

degrades

safely

for

motion

-

sensitive

users

instead

of

removing

feedback

entirely

.

@

media (prefers-reduced-motion: reduce)

scroll-behavior

7.

Architecture

&

Methodology

6

SKILLS

01

BEM

EXPERT

Block

–

element

–

modifier

naming

that

keeps

specificity

flat

and

intent

readable

,

so

any

class

can

be

found

from

the

markup

alone

.

.block

_

_element

-

-modifier

flat specificity

02

Utility

-

First

CSS

EXPERT

Composable

single

-

purpose

classes

driven

by

design

tokens

,

with

component

extraction

when

repetition

appears

;

Tailwind

-

scale

workflows

.

Tailwind

@

apply

variants

token scales

03

ITCSS

&

Layered

Architecture

AD VANCED

Organising

stylesheets

by

reach

and

specificity

—

Settings

,

Tools

,

Generic

,

Elements

,

Objects

,

Components

,

Utilities

—

and

mapping

them

onto

cascade

layers

.

ITCSS

@

layer ordering

single import entry

04

Design

Tokens

AD VANCED

Single

-

source

values

for

colour

,

spacing

,

type

,

radius

and

elevation

shared

across

CSS

,

JavaScript

and

design

tooling

.

-

-color-*

-

-space-*

-

-radius-*

token pipeline

7 / 10

CSS Hard Skills — page 8

05

Component

-

Scoped

Styling

AD VANCED

Isolation

through

CSS

Modules

,

scoped

custom

properties

,

shadow

DOM

or

style

containers

so

components

never

leak

into

one

another

.

CSS Modules

shadow DOM

@

scope

scoped tokens

06

Naming

&

File

Organisation

AD VANCED

Predictable

directory

structures

,

import

order

and

naming

rules

that

keep

a

stylesheet

readable

past

ten

thousand

lines

.

file conventions

import order

co-location

8.

Tooling

&

Preprocessing

6

SKILLS

01

Sass

/

SCSS

EXPERT

Variables

,

nesting

,

mixins

,

functions

,

maps

and

the

module

system

for

themeable

,

breakpoint

-

driven

stylesheets

.

@

use

@

forward

@

mixin

@

each

map.get()

02

PostCSS

AD VANCED

Plugin

pipelines

for

future

syntax

,

custom

media

,

nesting

and

project

-

specific

transforms

compiled

down

to

supported

CSS

.

postcss-preset-env

postcss-import

custom media

03

Autoprefixer

AD VANCED

Browser

-

targeted

vendor

prefixing

driven

by

browserslist

data

,

so

prefixes

track

the

actual

support

matrix

rather

than

habit

.

autoprefixer

browserslist

browserslistrc

04

Lightning

CSS

PROFICIENT

Rust

-

based

parsing

,

transformer

and

minifier

used

to

downlevel

modern

syntax

for

legacy

browser

targets

at

build

speed

.

lightningcss

targets

drafts

minify

05

Stylelint

PROFICIENT

Linting

for

convention

,

specificity

limits

,

property

order

and

error

prevention

,

wired

into

CI

and

pre

-

commit

hooks

.

stylelint-config-standard

stylelint-order

-

-fix

8 / 10

CSS Hard Skills — page 9

06

Build

Integration

AD VANCED

Wiring

stylesheets

into

Vite

,

webpack

,

esbuild

or

Parcel

with

hot

module

replacement

,

code

splitting

and

per

-

route

bundles

.

Vite

webpack

esbuild

CSS code splitting

HMR

9.

Performance

&

Optimization

6

SKILLS

01

Critical

CSS

AD VANCED

Inlining

above

-

the

-

fold

styles

and

deferring

the

remainder

to

eliminate

render

-

blocking

stylesheet

requests

on

first

paint

.

inline critical

media="print" onload

preload

02

Unused

CSS

Elimination

AD VANCED

Purging

and

tree

-

shaking

styles

against

real

template

output

,

including

dynamically

constructed

class

names

.

PurgeCSS

content scanning

safelist

03

Minification

&

Compression

AD VANCED

Selector

and

value

minification

,

whitespace

elimination

and

Brotli

or

gzip

delivery

at

the

edge

.

cssnano

Brotli

gzip

cache headers

04

Selector

&

Rendering

Performance

AD VANCED

Avoiding

deeply

nested

selectors

,

universal

descendants

and

expensive

combinators

that

force

broad

style

recalculation

.

flat selectors

style recalculation

contain

content-visibility

05

Reflow

&

Layout

Thrashing

PROFICIENT

Diagnosing

forced

synchronous

layout

and

batching

style

reads

and

writes

to

keep

the

main

thread

responsive

.

forced reflow

layout shift (CLS)

batching

06

CSS

Budgets

&

Auditing

PROFICIENT

Enforcing

size

budgets

in

CI

and

interpreting

Lighthouse

,

PageSpeed

and

coverage

reports

to

keep

the

cascade

lean

.

size-limit

Lighthouse

coverage report

cascade complexity

9 / 10

CSS Hard Skills — page 10

10.

Accessibility

,

Debugging

&

Quality

6

SKILLS

01

Focus

Management

EXPERT

Visible

,

well

-

ordered

focus

states

using

focus

-

visible

and

focus

-

within

,

with

outlines

that

survive

high

-

contrast

and

keyboard

navigation

.

:focus-visible

:focus-within

outline-offset

scroll-margin

02

WCAG

Colour

Contrast

AD VANCED

Meeting

AA

and

AAA

contrast

ratios

,

never

signalling

state

by

colour

alone

,

and

building

dark

-

mode

palettes

that

stay

legible

.

contrast ratio

forced-colors

non-colour indicators

03

Screen

-

Reader

-

Safe

Styling

AD VANCED

Visually

hiding

content

without

removing

it

from

assistive

technology

,

and

avoiding

layout

tricks

that

break

reading

order

.

clip-path: inset(50

%

)

aria-hidden

display: contents

04

Browser

DevTools

EXPERT

Computed

styles

,

grid

and

flex

overlays

,

container

and

layer

inspection

,

CSS

coverage

and

animation

debugging

.

Computed panel

Grid overlay

Coverage

Animations panel

05

Cross

-

Browser

Testing

AD VANCED

Running

a

defined

device

and

engine

matrix

,

writing

resilient

fallbacks

and

gating

enhancements

behind

feature

queries

.

Playwright

BrowserStack

caniuse

@

supports

06

Print

Stylesheets

PROFICIENT

Page

-

break

control

,

colour

preservation

,

print

-

specific

typography

and

hiding

interactive

chrome

from

the

printed

artefact

.

@

page

break-inside

print-color-adjust

@

media print

10 / 10

CSS Hard Skills

Prompt to Clone This CSS Hard Skills

Apply this example's core structure, strategic pacing, and structural hierarchy directly to your own topic.

What are you generating today?

Customer Relationship Management Hard Skills - Free AI Hard Skills Generator, 50+ Real Hard Skills Examples

Customer Relationship Management Hard Skills