DevWonders

Clamp

You can use the clamp() function to define a range within which your element's size will adjust fluidly, accommodating various screen sizes and content lengths. It takes 3 values: minimum, preferred and maximum. So instead of using both min-width and max-width properties separately, you can achieve the same effect with a single clamp() function

                            
                                .element {
                                    width: clamp(200px, 50%, 800px);
                                }
                            
                        

Resetting

If you ever needed to reset an element style and had to do for every property, you can just use the all shorthand

                            
                                .element {
                                    margin: 0;
                                    padding: 0; /* No need to do this anymore */
                                    border: none;
                                    background-color: none;
                                }

                                .element {
                                    all: unset;
                                }
                            
                        

Gap

Getting consistent spacing between elements often involved meticulously setting margins on the elements individually. For this you can use the gap property. It's a shorthand for row-gap and column-gap. It defines the size of the gap between the rows and between the columns in flexbox or grid layout. No need to manually set margin for each element anymore!

                            
                                .element {
                                    gap: 50px;
                                }
                            
                        

Place-items

Speaking of grid, place-items is also a shorthand, for align-items and justify-items, meaning you can now center your divs with less lines of code

                            
                                .element {
                                    place-items: center;
                                }
                            
                        

Inset

Ever needed to manually set the top, right, bottom and left property of an element? This css property is a shorthand for these, respectively

                            
                                .element {
                                    inset: 0 10px 20px 20px; 
                                    /* top, right, bottom and left */
                                }
                            
                        

Transform

You can also strip the scale, rotate and translate out of the transform property and use them individually

                            
                                .element {
                                    scale: 2;
                                    rotate: 90deg;
                                    translate: 50px;
                                }
                            
                        

Nesting

One of the primary reasons I've used SASS was because of it's rule nesting, something CSS didn't have. Well not anymore, as of December 2023, this feature works across the latest devices and major browser versions. It allows you to write CSS in a more concise way, eliminating tons of duplicate rule selectors from you code

                            
                                .grid {
                                    .card {
                                        background: blue;
                                    }
                                }
                            
                        

Mix Color

This is a function that take 2 colors as arguments and mixes them in the specified colorspace. Mostly useful for when you have a list of elements and want to create a gradient at different levels

                            
                                .button {
                                    background-color: color-mix(in srgb, red, blue);
                                }
                            
                        

Inline variables

This section is a mix between HTML and CSS and kind more of an . But let's suppose you have 3 texts and they're all different colors. You'd probably do this:

                            
                                .text1 {
                                    color: orange;
                                }
                                .text2 {
                                    color: blue;
                                }
                                .text3 {
                                    color: yellow;
                                }
                            
                        

You can simplify this CSS by giving each span an inline variable with it's color

                            
                                span {
                                    color: var(--color);
                                }