Skip to main content

Others

CSS Keyframe Animation​

A CSS keyframe animation is 0-100% time representation of all the transitions that should occur on the selected element for a specified period of time. This way multiple transitions can be combined into a seamless visual representation.

Transition Property​

A transition is a property that allows for CSS properties to be transitioned between two values. For example, hovering over an element and let it transition its opacity from 0 to 1.

CSS IN THE BROWSER: HOW DOES IT WORK?​

To get your HTML content styled by CSS the browser uses the following method. Upon loading HTML, it combines its content with the style information provided, creates a DOM tree, and finally displays its contents.

Media Queries​

https://www.freecodecamp.org/news/how-to-use-css-media-queries-to-create-responsive-websites

SCSS​

https://www.toptal.com/front-end/frontend-clean-code-guide

Use scss (sassy sass) or sass (indented sass)

  1. Use @extend for DRY principle (Don't Repeat Yourself)

  2. Use rem units (stand for root em) instead of pixels in CSS

https://snook.ca/archives/html_and_css/font-size-with-rem

  1. Use hr instead of border-bottom in CSS

https://www.toptal.com/sass/theming-scss-tutorial

Sass (Syntactically Awesome Style Sheets) is a CSS supersets that gives us programming type features and pre-compiles into CSS.

Sass vs Scss​

Since Sass 3, the new Sass syntax and file extension are called SCSS.

Features​

  1. Mixins
  2. Functions
  3. Maps / Lists

SASS - Syntactically Awesome Style Sheets​

A preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

SMACSS - Scalable and Modular Architecture for CSS (Cascading Style Sheets)​

A CSS writing methodology that allows us to modularize CSS code, and make it more readable and maintainable

https://www.toptal.com/css/smacss-scalable-modular-architecture-css

Scoped CSS​

All CSS-in-JS libraries generate unique CSS class names, a technique pioneered byCSS modules. All styles are scoped to their respective component, providing encapsulation without affecting any styling defined outside the component.

With this feature built-in, we never have to worry about CSS class name collisions, specificity wars, or wasted time spent coming up with unique class names across theentire codebase.

This feature is invaluable for component-based development.

Web Content Accessibility Guidelines (WCAG)​

Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.

https://www.w3.org/TR/WCAG20

Resources​

https://www.freecodecamp.org/news/how-to-make-a-landing-page-using-html-scss-and-javascript