Here are handy tools I use when dealing with CSS files.
CSS Beautifier
https://www.freeformatter.com/css-beautifier.html
Diffchecker
Diffchecker is an online diff tool to compare text to find the difference between two text files.
When you need to check the difference between 2 CSS files.
I once heavily changed the wrong CSS file, so had to do code cleanup by extracting the changes 😅
I used this tool and tasked a freelancer to do the work, by sharing the link with him (see careerplaybook-009-outsourcing-tasks/)
CSS examples
https://www.csscodelab.com/css-examples/
Box shadow syntax
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
/* Keyword values */
box-shadow: none;
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;
Reset Your Margin and Padding
from https://wpmudev.com/blog/css-workflow/
"Since all browsers have their own set of default settings for pages and they aren’t all the same across the board when it comes to margin and padding, it’s a good idea to start with a clean slate and, in a manner of speaking, erase or ignore what those browsers have set and start from margins and paddings of zero. This is called a reset.
Before you start adding your own styles, enter in a reset first. It saves you time trying to enter styles to compensate for every browser.
A simple reset can look something like the example below, but there are many out there you can use such as Eric Meyer’s Reset and which one you use is up to you and your specific needs.:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
"Some Little Improvements to My VS Code Workflow"
How to use Workspaces and Tasks (automation) in VS Code:
https://css-tricks.com/some-little-improvements-to-my-vs-code-workflow-workspaces-icons-tasks/