CSS

Question 1

What is the difference between classes and IDs in CSS?

Answer 1

IDs — Meant to be unique within the document. Can be used to identify an element when linking using a fragment identifier. Elements can only have one id attribute.

Classes — Can be reused on multiple elements within the document. Mainly for styling and targeting elements.

Question 2

What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Answer 2

Resetting — the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. You will have to redeclare styling for common typographic elements.

Normalizing — Normalizing preserves useful default styles rather than “unstyling” everything. It also corrects bugs for common browser dependencies.

I would choose resetting when I have very a customized or unconventional site design such that I need to do a lot of my own styling do not need any default styling to be preserved.

Question 3

Describe floats and how they work.

Answer 3

Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike position: absolute elements, which are removed from the flow of the page.

The CSS clear property can be used to be positioned below left/right/both floated elements.

Question 4

Describe z-index and how stacking context is formed.

Answer 4

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

Question 5

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

Answer 5

A block formatting context is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.

Question 6

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

Answer 6

Empty div method - <div style="clear:both;"></div>.

Clearfix method - Refer to the .clearfix class above.

overflow: auto or overflow: hidden method - Parent will establish a new block formatting context and expand to contains its floated children.

In large projects, I would write a utility .clearfix class and use them in places where I need it. overflow: hidden might clip children if the children is taller than the parent and is not very ideal.

Question 7

Explain CSS sprites, and how you would implement them on a page or site.

Answer 7

CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:

Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.

Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.

To use that image, add the corresponding class to your element.

Advantages:

Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.

Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn’t be seen.

Question 8

How would you approach fixing browser-specific styling issues?

Answer 8

After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.

Use libraries like Bootstrap that already handles these styling issues for you.

Use autoprefixer to automatically add vendor prefixes to your code.

Use Reset CSS or Normalize.css.

If you’re using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you’ve used.

Question 9

What are the different ways to visually hide content (and make it available only for screen readers)?

Answer 9

These techniques are related to accessibility (a11y).

width: 0; height: 0. Make the element not take up any space on the screen at all, resulting in not showing it.
position: absolute; left: -99999px. Position it outside of the screen.

text-indent: -9999px. This only works on text within the block elements.

Meta tags. For example by using Schema.org, RDF, and JSON-LD.

WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.

Even if WAI-ARIA is the ideal solution, I would go with the absolute positioning approach, as it has the least caveats, works for most elements and it’s an easy technique.

Question 10

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

Answer 10

I like the float-based grid system because it still has the most browser support among the alternative existing systems (flex, grid). It has been used in for Bootstrap for years and has been proven to work.

Question 11

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

Answer 11

Firstly, understand that 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. Hence avoid key selectors that are tag and universal selectors. They match a large numbers of elements and browsers will have to do more work in determining if the parents do match.

BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.

Be aware of which CSS properties trigger reflow, repaint and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.

Question 12

How is responsive design different from adaptive design?

Answer 12

Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.

Responsive design works on the principle of flexibility — a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.

Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used, and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you’d have several different balls to use depending on the hoop size.

Question 13

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

Answer 13

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line, :first-letter) or adding elements to the markup (combined with content: …) without having to modify the markup (:before, :after).

• :first-line and :first-letter can be used to decorate text.
• Used in the .clearfix hack as shown above to add a zero-space element with clear: both.
• Triangular arrows in tooltips use :before and :after. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.

Question 14

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

Answer 14

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border, and margin areas.

The CSS box model is responsible for calculating:

• How much space a block element takes up.
• Whether or not borders and/or margins overlap, or collapse.
• A box’s dimensions.

The box model has the following rules:

• The dimensions of a block element are calculated by width, height, padding, borders, and margins.
• If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below).
• If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding.
• The height of an element is calculated by the content’s height.
• The width of an element is calculated by the content’s width.
• By default, paddings and borders are not part of the width and height of an element.

Question 15

What’s the difference between inline and inline-block?​

Answer 15

block:

• Size - Fills up the width of its parent container.
• Positioning - Start on a new line and tolerates no HTML elements next to it (except when you add float).
• Can specify width and height - Yes
• Can be aligned with vertical-align - No
• Margins and paddings - All sides respected

inline-block:

• Size - Depends on content.
• Positioning - Flows along with other content and allows other elements beside it.
• Can specify width and height - Yes
• Can be aligned with vertical-align - Yes
• Margins and paddings - All sides respected.

inline:

• Size - Depends on content.
• Positioning - Flows along with other content and allows other elements beside it.
• Can specify width and height - No. Will ignore if being set.
• Can be aligned with vertical-align - Yes
• Margins and paddings - Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on line-height, even though the border and padding appear visually around the content.
• Float - Becomes like a block element where you can set vertical margins and paddings.

Question 16

What’s the difference between a relative, fixed, absolute and statically positioned element?

Answer 16

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

static - The default position; the element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not apply.

relative - The element’s position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).

absolute - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.

fixed - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn’t move when scrolled.

sticky - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Question 17

Have you played around with the new CSS Flexbox or Grid specs?

Answer 17

Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.

Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using flex-grow, and I had to rewrite my code using inline-blocks and math to calculate the widths in percentages, it wasn’t a nice experience.

Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.

Question 18

Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?

Answer 18

Note that these two 2 approaches are not exclusive.

Making a website responsive means the some elements will respond by adapting its size or other functionality according to the device’s screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}
A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:

.my-class {
font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}
A mobile-first strategy has 2 main advantages:

It’s more performant on mobile devices, since all the rules applied for them don’t have to be validated against any media queries.
It forces to write cleaner code in respect to responsive CSS rules.

Question 19

How is responsive design different from adaptive design?​

Answer 19

Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.

Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.

Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you’d have several different balls to use depending on the hoop size.

Both have these methods have some issues that need to be weighed:

• Responsive design can be quite challenging, as you’re essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
• Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.