Answers for CSS Interview Questions — Part II (11–21/34)

Published in

FED is love — Front-End

8 min readSep 12, 2022

Continue to answer CSS interview questions from Front-end-Developer-Interview-Questions. This material can be helpful for interview preparation for the Front-End position role. All of them are verbal, so I will try to avoid code blocks in my answers.

Here is a list of all articles:

11. Have you used or implemented media queries or mobile-specific layouts/CSS?

Media queries stay the main feature for Responsive Web Design but are not the only one.

@media (max-width: 600px) { body { background-color: lightblue; } }

Then with CSS grid and flex items, even without hardcoded breakpoints, we can achieve responsive behavior and mobile layout.

Flexbox

By defining property, flex-wrap:wrap flex items can be rendered in multiple lines if they don’t fit into one line.
So, by defining flex-basis it’s possible to set up a basic adaptive container width layout. As on this sample.

CSS Grid

It is the most mature layout-building tool for responsive UI.
Using grid-template-columns and grid-template-rows it’s possible to define a responsive layout.

min, max, clamp

Logical CSS functions help to determine the current width of the screen or container and choose the proper size for the element.

12. Are you familiar with styling SVG?

SVG can be added to a web page using such approaches:

img <img src=”image.svg” alt=”SVG Image” />.
object: <object data="image.svg" type="image/svg+xml" />
embed <embed src="image.svg" type="image/svg+xml" />
inline <svg><rect fill="red" /></svg>

The preferable way to inject SVG on a web page is with an “object” because you can interact with that using JS and inject some CSS if needed.

With the “inline” approach, it’s more easy and more native to style SVG images with CSS.

CSS properties for styling DOM elements inside SVG are slightly different.
SVG for CSS has its own specification.

Some Properties for SVG:

fill — for coloring background
stroke — colors of lines across a figure

13. Can you give an example of an `@media` property other than `screen`?

By wrapping CSS constructions in Media Queries, you can limit applying them for specific conditions.

There are 3 main types of Media:

all — for all devices
print — for a print version
screen- for displays, screen.
speech — for screenreaders

So, by having media type for Printers — you can build a layout specifically for the print versions.

14. What are some of the “gotchas” for writing efficient CSS?

It’s simple — “gotchas” happens because of not reading and not following main CSS specifications.

To avoid that mistakes:

Apply good practices and existing methodologies: SMACCS, BEM, or others.
Use strategies of Mobile First, Accessibility, and Responsive.
Avoid “magic numbers” — use variables, and functions.
Read specifications.

15. What are the advantages/disadvantages of using CSS preprocessor?

Popular preprocessor: LESS, SASS, Stylus.
To be honest, in 2022, there are not so much of advantages to using preprocessors.

Preprocessors variables?
Now, CSS3 has customer properties as a variables
Functions
Now, CSS3 has functions for calculations, etc.
Modules and partials
Webpack or any modern task manager can handle that.

That are not the advantages of preprocessors anymore.

But still, the main advantages of preprocessors:

Code is more beautiful and more structured
Final CSS is predictable because, during the compiling stage, CSS goes through the linters and validation process and always through errors in the build stage.
Variables and Functions in a resulting bundle compatible with all popular browsers.

Disadvantages:

Preprocessors add an additional level of complexity.
Preprocessors should be included in the build process, extending build time.
Barriers to entry into the project become higher, so you need to find developers who know not just CSS but some particular preprocessor.

16. How would you implement a web design component that uses non-standard fonts?

The only way to integrate custom fonts in modern web applications is the CSS rule — @font-family.

You can do that by uploading local fonts generated for the web or using cloud base fonts libraries like Google Fonts.

The benefit of using cloud-based services is cashing and open-source licenses.
But mostly for implementing some custom UI, you often need to have some local font in WOFF format.

17. Explain how a browser determines what elements match a CSS selector

Usually, the browser engine parses regular selectors from right to left.
By having a selector browser:

Search for all nodes that match the last element in the selector.
Then take the next element on the left side and traverse up DOM, looking for a matching parent.

Example 1: Regular CSS selector:

Selector: li a {}

Search for all a elements in DOM first.
It can be a big collection of elements.
Then that collection will be filtered by selecting just nodes that have li as a parent.

Example 2: CSS selector with > sign:

Selector: li > a
The algorithm will be different.

Firstly search for li selector
Then search for children a there.

The algorithm for searching selector with sign > is much faster.

18. Describe pseudo-elements and discuss what they are used for

On the DOM tree, you can find elements written in HTML with tags and pseudo-elements that browsers automatically inject in some particular places.

Pseudo-elements examples:
::before, ::after, ::selection, ::placeholder., ::first-line, ::first-letter

Pseudo-elements you can use in CSS selectors and can make lots of decoration stuff without adding additional wrappers or elements in HTML.

19. Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

Each element or pseudo-element is wrapped in a rectangular area.
CSS box model describes the relationship between the padding, width, height, borders, and margins.

Based on the next characteristics element has its physical size:

Content area

Size defines depending on display type (inline, block), the content inside or width, height property.

Padding area

Size defines on padding property.

Border area

Size defines on border-width property.

Margin area

Size defines on margin property for block elements or line-height for inline elements.

The final size (width, height) of the element calculates using border area, padding area, and content area. And its indents according to margin area.

There are two modes of the CSS Box Model that change the formula for calculating the final size of the element that can be switched with box-sizing CSS property.

box-sizing: content-box (default)

With box-sizing: content-box total physical element size is equal to the calculation of width and padding.

width: 100px;
padding-left: 50px;
padding-right: 50px

The total width size for the element above will be — 200px.

box-sizing: border-box

Elements have physical size depending just on height and width.

width: 100px;
box-sizing: border-box;
padding-left: 50px;
padding-right: 50px

The total width size for the element above will be — 100px.

20. What does * { box-sizing: border-box; } do? What are its advantages?

You can switch the CSS box model with the box-sizing property for all elements. By default box-sizing is content-box.

Redefine box-sizing to border-box

Because * { box-sizing: border-box; } it doesn’t include pseudo-elements:
The proper way for redefining box-sizing for all elements will be next:

html { box-sizing: border-box; } 
*, *:before, *:after { box-sizing: inherit; }

As a result, all elements have physical size depending just on height and width.

width: 100px;
box-sizing: border-box;
padding-left: 50px;
padding-right: 50px

The total width size for the element above will be — 100px.

That’s why the main advantage of this pattern is obviousness.
You define the width and expect the same width. As a result not depend on decoration like padding or border.

Disadvantage — performance.

21. What is the CSS display property? Can you give a few examples of its use?

The display property is not just regular property in CSS.
It defines the whole model and the behavior of elements inside of it.

Display properties can be divided into two categories: explicit and implicit defined. For example: In the case of explicit defining display: flex. children will be automatically defined as flex-items and it’s implicit.

The list of values for display:

Values: inline, block, contents, flex, grid, inline-block, inline-flex, inline-grid, inline-table, list-item, run-in, table, table-caption, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, none, initial, inherit.

By default, each tag has its display property:

<li>: display: list-item;
<section> : display: bock;
<table : display: table;
<strong> : display: inline;

Use cases for redefining the default value of display:

There are no tags in a browser that define grid or flex.
So, for setup grid or flex need to define the value for markup.

For example: transform ul > li into one-line navigation.
By defining display: flex to ul tag — unordered list transforms from a list in one column to one line.

Summary

I hope this material will be helpful not just for interview preparation but for a better understanding of CSS in common.