CSS cheatsheet

PROPERTIES

• clip-path
  • This property will clip the object borders according to the path given
  • It combines well with polygon(), circle(), path() or inset() functions
• shape-outside
  • This property will set the outside shape of an element

FUNCTIONS

• polygon()

ANIMATION

• @keyframes

class naming convention

• BEM
  Block Element Modifier
  Block is a logical section of the webpage such as navigation, user detail, item information
  Element is a functional sction of the webpage, such as button, banner, menu etc.
  Modifier is a modification of an element or of a block such as button - round, menu - dropdown etc.
  Block and Element are separated using double underscore
  Element and Modifier are separated using double hyphen

        .user-detail__title {}
        .user-detail__button {}
        .user-detail__button--submit {}
        .user-detail__button--cancel {}
  

Good Practices

• Don't set root font size in absolute units
  This will prevent the user's browser settings, and i.e. visually
  impaired users will not have the chance to change the font size on our page.
  Default browser font size is usually 16px.
  USE PERCENTAGE WHEN CALCULATING THE ROOT FONT SIZE
  If 10px root font size is our initial intent then html's font-size value
  will be 62.5%. (Because 62.5% of 16 is 10).

Examples

• Global reset example

        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: inherit;
        }
        
        html {
            font-size: 62.5%;
        }
        
        body {
            box-sizing: border-box;
        }