CSS Interview Questions

What is CSS BEM?

The BEM methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues. BEM stands for Block Element Modifier which is an explanation for its structure.

 A Block is a standalone component that is reusable across projects and acts as a "namespace" for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.

BEM methodology

CSS is used for page layout and is considered one of the block implementation technologies.

What are the four types of @media properties?

What is the CSS Box Model?

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model.

Content

Content: The inner-most part of the box filled with content, such as text, an image, or video player. It has the dimensions content-box width and content-box height.

Padding

Padding: The transparent area surrounding the content. It has dimensions padding-box width and padding-box height.

Border

Border: The area surrounding the padding (if any) and content. It has dimensions border-box width and border-box height.

Margin

Margin: The transparent outer-most layer that surrounds the border. It separates the element from other elements in the DOM. It has dimensions margin-box width and margin-box height.

What is the difference between em and rem units?

Both em and rem units are based on the font-size CSS property. The only difference is where they inherit their values from. em units inherit their value from the font-size of the parent element rem units inherit their value from the font-size of the root element (html) In most browsers, the font-size of the root element is set to 16px by default.

What's CSS specificity?

Assuming the browser has already determined the set of rules for an element, each rule is assigned a matrix of values, which correspond to the following from highest to lowest specificity: Inline rules (binary - 1 or 0) Number of id selectors Number of class, pseudo-class and attribute selectors Number of tags and pseudo-element selectors When two selectors are compared, the comparison is made on a per-column basis (e.g. an id selector will always be higher than any amount of class selectors, as ids have higher specificity than classes).

In cases of equal specificity between multiple rules, the rules that comes last in the page's style sheet is deemed more specific and therefore applied to the element.

What are CSS sprites?

CSS sprites combine multiple images into one image, limiting the number of HTTP requests a browser has to make, thus improving load times. Even under the new HTTP/2 protocol, this remains true. Under HTTP/1.1, at most one request is allowed per TCP connection. With HTTP/1.1, modern browsers open multiple parallel connections (between 2 to 8) but it is limited. With HTTP/2, all requests between the browser and the server are multiplexed on a single TCP connection. This means the cost of opening and closing multiple connections is mitigated, resulting in a better usage of the TCP connection and limits the impact of latency between the client and server. It could then become possible to load tens of images in parallel on the same TCP connection.

However, according to benchmark results, although HTTP/2 offers 50% improvement over HTTP/1.1, in most cases the sprite set is still faster to load than individual images. To utilize a spritesheet in CSS, one would use certain properties, such as background-image, background-position and background-size to ultimately alter the background of an element.