Answers for CSS Interview Questions — Part I (1–10/34)

Published in

FED is love — Front-End

8 min readSep 1, 2022

This material can be helpful for interview preparation for the Front-End position role. I answered all CSS questions on the most popular list of questions in the GitHub repository — Front-end-Developer-Interview-Questions. All of them are verbal, so I will try to avoid code blocks in my answers.

Here is a list of all articles:

1. What is CSS selector specificity, and how does it work?

We often need to know CSS Specificity because it happens that multiple selectors can match the same element in the DOM. So, one selector will override some properties of the other.

Without knowledge of CSS specificity, which selector will apply its style is not always obvious.

CSS selector specificity is a score for every selector.
That score needs browsers to know the priority of selectors in case of conflicts.

The selector consists of classes, id, tags, and pseudo-elements.
Each of those items has its score.
We sum them up and get a final score or call it CSS Specificity for the selector.

ID Selector — 1,0,0 points
Class Selector — 0,1,0 points
Attribute — 0,1,0 points
Element Selector — 0,0,1 point

So, some short selector is often less powerful than some extended selector.
But it also depends on the items we have inside of it.

Because of long selectors and their high specificity, building big chains of elements in selectors is not recommended.

Better to make a short selector. That is why in the preprocessors documentations like less or sass, you will find recommendations to avoid the nesting of selectors because it will be hard to redefine styles if needed in the future with another selector.

2. What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

Resetting and normalizing are essential for web development to avoid browser inconsistencies.

Resetting

Resetting is the process when you take all tags and set their properties to the same value. Mostly it's zero for indents and one value for font size, line-height, like 14px and 1.5.

As a result:

p (paragraph) will have no indents. So that there will be no top and bottom margins
H1 tags will have the same size as H6, so we reset the header font size to some default value.

After resetting — all tags look the same, and then you need to style them as you want.

Normalizing

"Normalizing" means — styling all controls to look and feel the same on different browsers and environments.

Unlike "resetting," it's not making all font size and margin the same but setting style for elements according to some style guide, so elements look consistent across different browsers.

Because different browsers have different default CSS for native controls like buttons, fields, input, and others, it often needs to make consistent.

Normalizer is in use by almost all modern CSS Frameworks.

3. Describe Floats and how they work.

Float — is a property for positioning elements on the page using flow layout.
It's an old way of positioning elements before flex and grid layout appear in the specification.

The property's value is a definition for the element by which string element or other float elements will wrap around it.

Block wrappers will ignore elements with float property inside.

Better to explain on example:
Wrapper A with two elements, C and D, inside.
C and D elements have float: left and static width and height
like height: 100px; width: 50px;
What will be the height of wrapper A?

The correct answer is:
ZERO. Because the block element will ignore float elements inside.

4. Describe the z-index and how the stacking context is formed.

z-index and its value help to order positioned elements inside their stack of context. The value for the z-index can be negative, zero, or any number.

A stacking context is formed for elements inside positioned, flex, or grid layout mode.

Positioned

When position property is defined as relative, absolute, fixed, or sticky, that element creates its own stack context.
It means that all child elements are inside that context.

Elements inside can overlap each other by following some rules.

Backstage will be elements with a negative z-index.
Then will be elements with position: static.
Above — elements with the position not static — but relative or absolute
Elements with positive z-index values will be sorted in ascending order.

But that sorting occurs in an isolated stack of context created with a wrapper.

It's essential to understand and take in mind that z-index: 1 million is not guaranteed that it will be above all elements on the page; it all also depends on the stack context that it has.

z-index in Flex and Grid Mode

You can order with z-index items in Grid and Flex without specifying position relative or other.

From documentation

Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

5. Describe BFC (Block Formatting Context) and how it works.

It's not easy to understand this concept but try to keep in mind these two statements:

Block element — is just an element.
Block formatting context — is area.

From specification

Block Formatting Context is an area where block elements and float elements exist and interact with each other. That block context knows about floats inside, so it’s not ignoring them as regular block elements do.

For new browsers, you can use CSS properties that explicitly define BFC: display: flow-root;

Also, you can switch to Block Formatting Context not in an implicit way from example with: overflow: hidden

To keep it simple, BFC we need for:

Clearfix. Adopt wrapper container for float elements inside
Avoid margin collapse if required.

6. What are the various clearing techniques, and which is appropriate for what context?

Apply clearing techniques to containers that wrap float elements
because if the wrapper has some floated elements inside, it ignores those elements' size.

Methods to fix that are called — clearfix.
There are mostly just two approaches for applying clearfix:

Enable block formatting context for wrapper element with
display: flow-root or overflow: hidden styles.
Define in CSS::after pseudo-element and apply to it
content: ''; clear: both; display: table;

You can find class names in various CSS frameworks that you can use for clearfix like this:

Bulma — is-clearfix
Boostrap — clearfix

7. How would you approach fixing browser-specific styling issues?

You need to define the problem locally.
So, you should install the browser and its version in your local environment.

You can install a specific virtual machine to get Internet Explorer 9, 10, and 11. You can find images for them on the Microsoft website.

Also, you can use cloud-based tools for cross-browser testing like — BrowserStack.

When you find out the root cause of the issue, you can fix that.
If you need to apply the fix for some specific browser, you can use Modernizr.

In extreme cases — use HTML conditions for some specific browsers, and detect the user agent in JavaScript. Also, you can construct some weird CSS selectors that will be understandable just for some particular versions of the browsers.

8. How do you serve your pages for feature-constrained browsers?

If the device is not supporting some specific feature, you can still try to find some technical solutions known as — polyfill.

But workarounds with polyfills or fallbacks often cause problems like a slow render performance, adding layers of complexity to the solution, etc.

So, that is why in a lot of methodologies and patterns, it's recommended to follow strategies like:

Graceful degradation —you develop web applications for modern browsers. While figuring out that some feature is not working for some specific device, you try to find alternative solutions or disable that feature if it's not critical.
Progressive enhancement — you develop web applications for the most limited devices first and then extend your functionality for some more feature-reach devices.

It's better to follow progressive enhancement. This approach is more predictable and has fewer hacks and tricks in the code you need to write.

9. What ways to visually hide content (and make it available only for screen readers)?

As I know, the only guaranteed way to achieve the result for this 1px box.
“position: absolute”, “height: 1px” and “width: 1”, and “overflow: hidden”.

Methods like "visibility: hidden" or "display: none" will help because screen readers often parse styles and ignore hidden content inside invisible blocks.

10. Have you ever used a grid system, and if so, what do you prefer?

Native grid system — CSS Grid is already implemented in all modern browsers so that Developers can use it for some use cases, but most often, we still have to craft a grid system using flexbox or float.

It's better not to reinvent the wheel but use some existing grid system.

You can find some standalone grid systems like:

FlexBox Grid based on flexboxes
React Grid layout (For React library)

But more often, developers had to use an integrated grid system for a component library or CSS framework used on the project.

Bootstrap
Bulma
Foundation
Semantic UI
Materialize

It's good to be flexible in choosing a grid system for the project.
If you build your design system, developing your Grid System or using some standalone version makes sense.
If your project already has some CSS Framework, it's better to choose an integrated one.

Summary

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