1. What is flex and CSS grids? Which to use when?

Answer: Flex and CSS grids are a great way to create a web page layout. However, the major difference here is: what are the features they have, which is more powerful and flexible, and which to use when?

Flex is 1D. It means with flex you can have either rows and columns not both at the same time. In CSS grids you can have both at the same time. CSS grids are powerful as it has a lot of powerful and useful features which will help in making the complex layout easy to develop and control.

One can merge both by using CSS grids for layout and flex for content.

The interviewer here wants to know if you know the different techniques of layout creation and contrast between them.

2. Explain how you maintain your CSS. Assuming you are handling enterprise projects.

Answer: Managing big CSS could be challenging. One way is to use pre-processor such as SASS or LESS. Both are great pre-processor and helps in managing the CSS files very well. They have features such as partials, variables, nested CSS, etc. It is an effective way to avoid the conflicts in the stylesheet as well as to manage big CSS files too.

*Here interview is interested to know do you have any experience in managing the CSS. As well as, do you consider this? *

3. What is the difference between rem and em?

Answer: rem and em are both CSS units. rem means relative em. The difference between em and rem is, rem takes the value from the root whereas em takes the value from the parent element. This makes all the difference.

4. Explain the difference between position fixed and sticky

Answer: The positions are very interesting area when dev wants to develop the complex layouts. We know very well what is fixed position, it will remain 'fixed' to the position we have declared.sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view.

Here interviewer wants to understand your knowledge on the positions. Positions are one of the most interesting part for creating the complex layout and controlling them on different resolution is an art.

5. What is critical CSS?

Answer: Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible. This is a good strategy for loading the webpage quickly with the basic stuff.

Here interviewer would like to see does you know about performance and new concepts around how to do fast loading?

Happy Learning!!