css tricks Archives

27Feb

By phpInfoNo Comments

CSS Tricks, Web Tricks

An Introduction To CSS Cascade Layers

CSS recently turned 25 years old, and over that time, many techniques and tools have been created to help developers work with the cascade. Within the last year, a new spec to orchestrate the “C” in CSS was drafted and is now an official candidate recommendation: cascade layers. Cascade layers allow controlling the specificity and order of rule sets across stylesheets. We all have run into CSS collisions and sudden regressions in our codebases when new styles are written or 3rd-party styles are added. This is because of the interdependence of styles due to source order, specificity, and inheritance. Some ways to control the cascade have included methodologies like ITCSS and BEM and other newer native features like CSS custom properties and :where/:is. Cascade layers will be the ultimate na...

Draggin and Droppin in React

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality (e.g. multiple drag and drop instances), and if they do, it becomes very complex. This is where react-sortable-hoc comes into play. ? This tutorial requires basic knowledge of React library and React hooks. This library has “HOC" in its name for a good reason. It provides higher-order components that extends a component with drag and drop functionality. Let’s walk through an implementation of its functionalities. Spinning up a project For this tutorial we are going ...

Keep Math in the CSS

There is a sentiment that leaving math calculations in your CSS is a good idea that I agree with. This is for math that you could calculate at authoring time, but specifically chose not to. For instance, if you needed a 7-column float-based grid (don't ask), it's cleaner and more intuitive: .col { /* groan */ width: 14.2857142857%; /* oh, I get it */ width: calc(100% / 7); } You could probably prove that the calc() takes the computer 0.0000001% longer, so explicitly defining the width is technically faster for performance reason — but that is about the equivalent of not using punctuation in sentences because it saves HTML weight. That math can a little more complicated as you continue. For example, like in our use cases for calc() article, what about columns i...