Scribd
Upload
43 views

11.1 Css-17-Future-Css PDF

CSS variables allow defining values once and reusing them throughout CSS code. Cross-browser support requires using vendor prefixes, feature queries, and polyfills. When choosing a CSS approach, vanilla CSS gives full control but requires more work while frameworks provide rapid development but less control. Utility frameworks can offer a compromise.

Uploaded by

Jaani Maraal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
43 views

11.1 Css-17-Future-Css PDF

CSS variables allow defining values once and reusing them throughout CSS code. Cross-browser support requires using vendor prefixes, feature queries, and polyfills. When choosing a CSS approach, vanilla CSS gives full control but requires more work while frameworks provide rapid development but less control. Utility frameworks can offer a compromise.

Uploaded by

Jaani Maraal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like