Andrejs Abrickis AndrejsAbrickis
- Gecko Reflow Visualization
- css-stacking-contexts-wtf
- critical-rendering-path
- why-do-browsers-match-css-selectors-from-right-to-left
- getting-started-with-the-webkit-layout-code
- improving-css-performance-fixed-position-elements
- BlinkOn 5: Paint and Compositing Deep Dive
- a-quick-overview-of-chromes-rendering-path
- [render-blocking-css](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-b
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft,elem.offsetTop,elem.offsetWidth,elem.offsetHeight,elem.offsetParent
Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets
“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?