Hi guys. In this post, I discuss some of the common interview questions for CSS. These questions are taken from this github repository. Not all answers here are written by me. Many of them exist on the WWW. I have just grouped them together here so that you have a one stop for the questions and their answers.
Let’s get started.
What is CSS selector specificity and how does it work?
Good reads:
What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
Brief: Resetting is just removing all the default styles, browsers add to some elements.
Normalizing is making the default styles consistent across all browsers.
If you are using some Styling libraries like bootstrap, to style your website, then probably resetting all the browser defaults would be ideal otherwise, they will cause some un-intended style issues which can be hard to debug.
If you are not using any style libraries, then it makes sense to just normalize the styles across all browsers so that you don’t have to duplicate yourself when styling elements.
Describe Floats and how they work.
Describe z-index and how stacking context is formed.
Describe BFC (Block Formatting Context) and how it works.
What are the various clearing techniques and which is appropriate for what context?
How would you approach fixing browser-specific styling issues?
By either resetting or normalizing the styles.
How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
I always check Can I Use to see if some CSS stuff is supported in all browsers. If yes awesome. If not, I add fallbacks for older browsers.
What are the different ways to visually hide content (and make it available only for screen readers)?
text-indent: -10000px;position: absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;
Have you ever used a grid system, and if so, what do you prefer?
I have used the Grid system. And the preference depends on the scenario. If I want a multi-container layout and containers inside containers to organize content, I would use grid template because using Flex would just add parent container divs to organize the content. And usually in other scenarios, flexbox seems more appropriate.
Have you used or implemented media queries or mobile specific layouts/CSS?
Yes. I have. Although I haven’t primarily focused on mobile-specific layouts, I have worked on fluid layouts that work on all screen sizes instead of just targeting size groups (mobiles, tablets, laptop, desktop).
Are you familiar with styling SVG?
Can you give an example of an @media property other than screen?
all: Suitable for all devices.print: Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)screen: Intended primarily for screens.speech: Intended for speech synthesizers.
What are some of the “gotchas” for writing efficient CSS?
- Replace images with CSS effects if possible.
- Remove unnecessary fonts
- Use multiple
<link>tags instead of@import.@importrules can be nested so the browser must load and parse each file in series. Multiple<link>tags within the HTML will load CSS files in parallel, which is considerably more efficient — especially when using HTTP/2. - Minify the CSS
- Simplify selectors
- Beware of expensive CSS properties. Some properties are slower to render than others. Browser performance will vary but, in general, anything which causes a recalculation before painting will be more costly in terms of performance.
border-radius,box-shadow,opacity,transform,filter,position: fixed. - Prefer CSS animations over JS animations as native animations are faster.
- Avoid animating expensive properties.
- Adopt SVG images
- Avoid base64 bitmap images. Unfortunately:
- base64 encoding is typically 30% larger than its binary equivalent
- the browser must parse the string before it can be used
- altering an image invalidates the whole (cached) CSS file.
What are the advantages/disadvantages of using CSS preprocessors?
Advantages
- Lot of reusability.
- Clean code because of nesting
- Easy to debug
Disadvantages
- Compiled CSS is bigger in size compared to if we have written our styles in CSS directly.
- Easy to fall into Nesting hell.
Explain how a browser determines what elements match a CSS selector.
Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector, and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
Describe pseudo-elements and discuss what they are used for.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. Note: In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state. More Info
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
What does * { box-sizing: border-box; } do? What are its advantages?
What is the CSS display property and can you give a few examples of its use?
What’s the difference between inline and inline-block?
What’s the difference between the “nth-of-type()” and “nth-child()” selectors?
What’s the difference between a relative, fixed, absolute and statically positioned element?
What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
Bootstrap, Material are the ones I have used in production. Add some missing components in bootstrap and add defaults to configuration of components in Material.
Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
Responsive design is when a website looks good and shows all the features on all screen sizes. Mobile-first strategy is an approach to making your design responsive. In mobile-first strategy, we first target mobile screens and then expand the layout out for bigger screen sizes.
Have you ever worked with retina graphics? If so, when and what techniques did you use?
Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?
If we just want an offset from the current position, then absolute positioning would mean that I will have to position it from (0, 0) of the nearest relative parent. Translate here would be more suited.
If we don’t care about the current position and just want to place is somewhere in the container, then we would wanna use position: absolute.
Can you explain the difference between px, em and rem as they relate to font sizing?
pxis an absolute value (depends on nothing, except dpi of the system)emis a relative value. So,1.5em= time the font-size of the parent element.remis also a relative value. So,1.5rem= time the font-size of the root element which is the<html>element.
Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?
- Good Read
- Prominent use case: If we want to change styles of a button when a user hovers over it or focuses it.
What is the difference between a block level element and an inline element. Can you provide examples of each type of element?
A block-level element is an HTML element that begins a new line on a web page and extends the full width of the available horizontal space of its parent element. Examples: <div>, <p>, etc.
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. Examples: <a>, <strong>, <button>, etc.
Comments
Post a Comment