HTML CSS

Best Practises ~ Do's Dont's ~ Tips & Tricks

• Always use semantic HTML
• With component based approach, a lot of times the same CSS is being repeated over and over. Its best to think of the big picture to write DRY CSS.
• Never use fixed width in terms of px, unless desperately required. Try giving widths in %. Do not give width 100% to all elements. This will cause overflow issues. Stick to width : auto which is default.
• Try not using height as much unless required. Instead go with min-height. CSS works best when we don’t define height and width at the same time
• Use responsive units em and rem over px
• Never use px for font sizing. It will cause issues to the users who prefer larger font size. + It causes issues in accessibility
• When using css variables, always mention defaults "margin: var(--margin, 10px);""
• Inline elements dont get vertical margin and padding.
• Containing elements : Height/padding/margin given in % is based on its parent's width, not height!
• The Box model
  • Border-box (includes border, padding and content width)
  • Does not include margin
  • Intrinsic and extrinsic sizing
• Properties Inheritance
  • Only font properties are inherited.
  • Not everything is inherited
  • Not inherited : margin, padding, height, width, position
  • Not inherited :Button, input, optgroup, select, textarea
  • Solution to form elements inheritance. (add this to your css reset).
    

                button,
                input,
                optgroup,
                select,
                textarea{
                    font-family: inherit;
                }
                    

  • Take advantage of Inheritance and write better CSS.
    • Example : In a banner if everything is centered, then the property 'text-align: center' must be give only once to the parent, instead of giving it to each child.
    • Fontsize fontfamily etch typography is inherited. That why if you want to write DRY code, just write the font size, font family, line height just once in the html tag.
• Class Inheritance
  • Origin and importance
    • Order of origin
      • Important user declarations
      • Important author declarations
      • Author declarations
      • User Declarations
      • User agent declarations
  • Specificity
    • Specificity check : https://specificity.keegan.st/
    • !important
    • Inline styling
    • Id selector
    • Class selector
    • Element selector
    • How specificity works
      • /*0 0 0 0 */
      • First 0 is !important
      • Second is id
      • 3rd is class
      • 4th is element
  • Order of appearance
    • Order of classes in HTML doesn't matter. The order of classes in CSS file matters
      • Inline styles
      • Linked stylesheet
      • Embedded styles
    • User declarations : The user imposes
• Em vs Rem :
  • Em is based on the elements parent, Rem is based on root element
  • Us em for giving padding for even scale up (example : buttons)
• General rule of thumb for line-height
  • Body : 1.6
  • Headings: 0.9 - 1.1-1.3ish
• Pseudo Classes : State selectors
  • :hover
  • :focus : tab and click
  • :disabled
  • :required
  • :active
• Structural Pseudo classes
  • :first-child
  • :last-child
  • :first-of-type
  • :last-of-type
  • :nth-child(2)
  • :nth-child(even)
  • :nth-child(odd)
  • :nth-child(2n)
  • :nth-child(2n + 1)
  • :last-child(2n+1)
  • :nth-last-of-type(2)
• selectors
  • > : Direct child combinator
  • + : Adjacent sibling
  • * : all elements
• CSS Debug : Use outline property instead of border and background to debug CSS. Outline doesnt not interfere with the box model.
• CSS Reset tips :
  • Images : img { max-width: 0; display : block; height: auto}
  • h1, h1, h3, p { margin: 0; padding:0 }
  • ul[class], ol[class]{list-style: none; margin:0; padding:0}
  • button, input, optgroup, select, textarea { font-family : inherit}
  • https://necolas.github.io/normalize.css/8.0.1/normalize.css
  • https://meyerweb.com/eric/tools/css/reset/
• BEM
  • __ : Lives inside a parent
  • -- : modifier
• Save code repeat for flex and grid by targeting in the below way
  

  [class*="grid-"]{
      display: grid;
      gap: 1rem;
  }
  

• Disable right clicking
  

  <body oncontextmenu="return false">
  

  <section oncontextmenu="return false">Not allowed</section>
  

• Prevent image loading until the user scrolls to the section
  

  <img src="pepercry.png" loading="lazy" alt="A crying frog" />
  

• Open back facing camera
  

  <input type="file" capture="environment" accept="video/*">
      

• Open front facing camera
  

  <input type="file" capture="user" accept="video/*">
      

• Refresh a page every 30 seconds

  <meta http-equiv="refresh" content="30">
      

  redirect after 30 seconds

  <meta http-equiv="refresh" content="30;https://iwiz.in">
      

• CSS : Check if a class has
  

  .post:has(h2, 1){
      Background: white;
  }
      

• Media Queries
  

  @media screen and (min-width: 768px){...}
  

  @media print (min-width: 768px){...}

  @media all (min-width: 768px){...}

  @media (min-width: 768px){...}

  @media print (orientation: landscape){...}

  @media (min-width: 768px){...}

  @media print (min-width: 768px), (orientation: landscape){...}

  @media print (min-width: 768px) and (max-width: 1440px){...}

• CSS Games learning
  • Flexbox Groggy
  • CSS Diner
  • CSS Speedrum
  • Grid Attack
  • Flexbox Zombies
• CSS Frameworks
  • Bootstrap
  • Foundation
  • Bulma
  • Tailwind CSS
• Static site generator
  • Eleventy
  • Hugo
  • Jekyll
  • Gatsby
• CSS preprocessors
  • Less
  • Stylus
  • PostCSS
  • SCSS
• Stacking context : any element that has position, opacity, transfor etc + many more.. creates a new stacking context. (this is related to the frustrating z-index.
  There are a lot of properties that create a new stacking context. When we create a new stacking context, it pulls that element onto that "new plane", putting it "above" the other elements on the page that are part of the normal flow.
  While they are pulled up, this does not mean you can use a z-index on them. So, for example, if you declare opacity: .5 on an element, and then try to give it a z-index, that z-index would have no effect. To use z-index, the element either needs a position other than static, or it must be a flex or grid child.
• Use same class name twice or thrice if you are facing hierarchy or specificity issue in css
• Flex Gap : This property is still not widely supported. So if the children inside a flex are items, we give a class called .flex .items + .items {margin-left: 10px}