1 . Global Reset

When working with CSS, the user-agent stylesheet is automatically applied to HTML elements. It's crucial to reset this stylesheet before creating your own styles for the project. One common practice is to reset the margin and padding values to 0.

Why?
To avoid repetitive line of codes

 * {
    margin: 0;
    padding: 0;
  }

2. CSS Variables

Maintaining consistency in your code is crucial, especially when it comes to CSS, where it's important to maintain consistency in areas such as color, font-size, and spacing. One way to ensure consistency is by using variables, which can be declared once and reused throughout the code. CSS variables not only help maintain consistency but also make it easier to maintain the code over time.

For example, if you need to update a color in your CSS, you can do it in one place using CSS variables.

:root{ 
  --primary-color: #999;
}

h2{ 
  color: var(--primary-color)
}

3 . box-sizing

The box model is a fundamental concept in CSS that involves calculating an element's width and height based on its border and padding. If an element has a fixed width or height as well as padding or a border, it may result in extra pixels being added to the width or height, which can cause bugs in the layout.

To calculate the width of an element with the box model, you would add its width to its border and padding:

width of element = width + border + padding

Looking at the image above, we can see that the width of the div is 150px. However, due to the presence of padding and border, the actual width of the element has increased to 170px.

To prevent this issue from occurring, it's recommended to set the box-sizing property to border-box. This ensures that the container's width is not affected by the padding and border, and any padding or border added to the element is included within the specified width of the element.

div { 
  width: 150px;
  height: 150px;
  background: #eee;
  padding: 10px;
  border:2px solid #999;
  box-sizing: border-box;
}

* {
    box-sizing: box-model;
 }

By setting the box-sizing property to border-box, you can avoid a lot of time and frustration spent trying to fix layout issues, such as elements breaking or extra pixels being added to a container with a fixed width. This simple technique can save you a lot of time and headaches in the long run.

4 . :is()

is() is a CSS pseudo-class function that allows you to test if an element matches a certain selector. It returns a boolean value of true or false depending on whether the element matches the specified selector.

This helps in writing less, do more, and ease of readability.

 <input type="text">
 <input type="email" >

 input[type=text], input[type=email] { ... } 

section h1,
section h2,
section h3 { ... }

instead of the above do this:

input:is[ [type=text],[type=email]]{ ...}
section:is [h1, h2, h3]{...}

5. font-size units

While px is the most commonly used unit in CSS, it has its limitations. One major issue is that it doesn't adjust based on screen size, which can make it difficult to create responsive layouts and maintain the code over time. Fortunately, there are other units available, such as em and rem, that can make it easier to create responsive designs and maintain the code.

When selecting units for your CSS, it's important to follow these guidelines:

• Maintain consistency throughout your code.

• Choose units that are responsive to different screen sizes.

• Select units that are easy to change and maintain over time.

For fonts, it's recommended to use rem, and for spacing, it's best to use em. However, you should still use px units when necessary based on the requirements of your design.

6. :has()

:has() is a CSS pseudo-class selector that matches elements based on whether they contain a specific element or not. It allows you to select an element that has another element as a descendant, regardless of how deep the descendant is nested.

For example, you could use :has() to style all div elements that contain an H3 and H4 element differently:

Happy Learning!!

Twitter

Linkedin