Beginners CSS Best Practices

Here are some CSS best practices for those learning CSS. No one will start writing better CSS overnight, it takes practice and tuning. Every experience is unique and you should keep an open mind in order to try things until they feel right for you.

Don't be afraid to adopt tools to help you but also don't be too eager to jump into something just because everybody is doing so. There is an art level in understanding, writing, and organizing CSS. Whatever the rules you end up adopting, remain consistent.

• Plan you CSS

  Before writing your CSS, plan your page layout and plan how you are going to use your CSS. What general styles are going to be needed, what different layouts do you need to create, what specific overrides need to be created, and are they reusable? Above all, you need to try to avoid too much overriding. If you keep finding yourself writing styles and then canceling them again a few rules down, you probably need to rethink your strategy.

• Use flexible/relative units

  For maximum flexibility over the widest possible range of devices, it is a good idea to size containers, padding, etc. using relative units like ems and rems or percentages and viewport units if you want them to vary depending on viewport width.

• Don't use a preprocessor

  Don't use preprocessor syntax, such as Sass, Less, or Stylus. These just add a layer of complexity that most sites do not need.

• Don't use resets

  For maximum control over CSS across platforms, a lot of people used to use CSS resets to remove every style, before they building the CSS themselves. This certainly has its merits, but especially in the modern world, CSS resets can be an overkill, resulting in a lot of extra time spent re-implementing things that weren't completely broken in the first place, like default margins, list styles, etc.

• CSS comments

  Use CSS-style comments to comment code that isn't self-documenting. Also note that you should leave a space between the asterisks and the comment for readability only.

   /* This is a CSS-style comment */

  Put your comments on separate lines preceding the code they are referring to, like so:

                      h3 {
    
                                 /* Creates a red drop shadow, offset 1px right and down, with a 2px blur radius */ 
  
                             text-shadow: 1px 1px 2px red;
    
                             /* Sets the font-size to double the default document font size */
    
                             font-size: 2rem;
  
                          }
  
                      
                  

• Double quotes around values

  Where quotes can or should be included, use them, and use double quotes. For example:

                      [data-vegetable="liquid"] {
    
                             background-color: goldenrod;
    
                             background-image: url("../../media/examples/lizard.png");
  
                          }
  
                      
                  

• Longhand vs. shorthand rules

  Sometimes you want to specify the padding-top or border-right but from experience, you will often come back to these to add more so adopt the habit to always use the shorthand to make it easier to change without specifying many properties. It is easier to change and it is less code.

  These values go in this order: top right bottom left.

   padding: 1em inherit inherit inherit;

• Selectors

  When a rule has multiple selectors, put each selector on a new line. This makes the selector list easier to read and can help to make code lines shorter.

  Don't use ID selectors because they are:

  • less flexible; you can't add more to the id attribute if you discover you need more than one.
  • harder to override because they have higher specificity than classes.

• Write CSS consistently

  Consistency is key. Even if you are doing everything wrong, remain consistent as it will be easier to fix them later. Find a naming convention that works for you, adopt a CSS methodology, organize styles the same way, define how many levels you nest selectors, etc. Define your style and stick to it and improve it over time.

• Avoid too many font files

  Maybe the designers handed you too many font files which is a red flag. A website with too many fonts can be chaotic and confusing so, always make sure you are including the fonts you will need for the page. Fonts can take time to load and be applied and when you have too many fonts your UI normally jumps into place after the fonts are loaded.

  Always try to keep your fonts to just 2 font names.

• Use CSS variables

  The #1 reason to use a pre-processor in the past was the variables. CSS variables are way better because they stick around when loaded in the browser. The support is good and it allows you to create a more flexible and reusable UI, without mentioning it helps you create a more powerful design system and features.

• Format Text with CSS

  CSS can format your HTML text. No need to manually write all caps, all lower or capitalized words in your HTML. Changing a CSS property value is way faster to change than going around changing all the text in HTML, and it is also better for internationalization as it allows you to write the text as you want and manipulates how it looks with CSS.

• Let the content define the size

  Instead of setting the width and height of a button, for example, consider setting some padding for spacing and including a max-width instead and max-height instead unless the design calls for a strict size.

• Avoid color names

  Prefer to specify your color values with hex and color functions instead of saying red, purple, or cyan. There are millions of hex color values and no name for all of them. For consistency's sake, find one way to add colors and stick to it.

Try to organize CSS to match the Markup Order

It sure makes for an easier way to understand your markup just by looking at your CSS. It is something I do and saves me a lot of time.

Keep HTML semantics and use CSS for styling

It is common to find developers who go around changing their HTML in order to apply a certain style. In general, let the styling to CSS and let your HTML structured in a way that makes sense semantically. There are exceptions to this rule but always ensure that the adopted structure does not go against any HTML semantic rules. Write your HTML first with content in mind, not styling. Then add CSS and try your best before changing your HTML for styling reasons.

• Hyphens or underscore?

  The most common separator for class and id names is a hyphen but whatever you pick, stick to it. Hyphen is easier to read and troubleshoot than an underscore.

Remove Unused CSS

For the same reason, you should ship the only CSS you will use, consider using tools like PurgeCSS to remove CSS that will not be needed in rendering. These tools will look at your CSS and HTML to determine which styles you will need. If you are not sure you need this, consider using browser tools that look for your code coverage which will tell you whether you are shipping unused style or not.