CSS Variables
:root {
--my-color: #fa923f;
.element-1 {
}
color: #fa923f;
}
.element-1 {
color: var(--my-color);
.element-2 {
}
color: #fa923f;
CSS Variables
}
.element-2 {
color: var(--my-color);
.element-3 {
}
color: #fa923f;
}
.element-3 {
color: var(--my-color, #fa923f);
}
Vendor Prefixes
Browsers implement new Features Differently and at different Speed
.container {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Support Queries
Some Features just aren‘t implemented (yet) in some Browsers
@supports (display: grid) {
.container {
display: grid;
}
}
Polyfills
A Polyfill is a JavaScript Package which
enables certain CSS Features in Browsers
which would not support it otherwise.
Remember: Polyfills come at a cost! The JavaScript has to be loaded and parsed!
Eliminate Cross-Browser Inconsistencies
Browsers use different defaults
Different Margins,
Different box-sizing
Paddings…
Use Reset-Library
Reset Styles Manually
(e.g. Normalize.css)
Choosing Class Names Correctly
Do Don‘t
Use kebab-case Use snakeCase
Because CSS is case-insensitive Because CSS is case-insensitive
Name by feature Name by style
For example .page-title .title-blue
Block Element Modifier (BEM)
A uniform and consistent way of naming your CSS classes
. BLOCK __ ELEMENT -- MODIFIER
Example . menu-main __ item -- size-big
Example . button __ -- success
“Vanilla CSS” vs CSS Frameworks
Vanilla CSS Component Frameworks Utility Frameworks
Tailwind CSS
Bootstrap 4
Choose from a rich suite of Build your own styles and
Write all your styles and
pre-styled components & layouts with the help of
layouts on your own
utility features/ classes utility features and classes
“Vanilla CSS” vs CSS Frameworks
Vanilla CSS Component Frameworks Utility Frameworks
Full Control Rapid Development Faster Development
No unnecessary Code Follow Best Practices Follow Best Practices
No Expert Knowledge
Name Classes as you like No Need to be an Expert
Needed
Build everything from
No or Little Control Little Control
Scratch
Unnecessary Overhead Unnecessary Overhead
Danger of “bad code”
Code Code
“All Websites Look the
Same”
Summary
CSS Variables Cross-Browser Support Vanilla CSS vs Frameworks
• Browser implement new • Writing all styles from
• --your-name: 1rem;
features differently and scratch gives you full
• Define values once, use
with different speed control but comes with
them multiple times
• Use vendor-prefixes to use more work and
• Only supported in modern
cutting-edge features AND responsibility
browsers
support older browsers • Component frameworks
(partly) (e.g. Bootstrap 4) allow you
Naming CSS Classes • @supports allows you to to build web pages rapidly
check for feature-support but with less control
• Use kebab-case (e.g. page-
before using a property • Utility frameworks can be a
title) and name classes
• Polyfills can enable some good compromise
by feature not by style (e.g. CSS features which
title-blue)
wouldn’t work otherwise
• Avoid class name collisions, • Consider normalizing CSS
for example by using BEM defaults across browsers
class names
