CSS Basics: part 1

The Front End Engineering Interview Series

I have over a decade of web application development experience and most of that time has been focused on “front end” (or user interface) development.  I have been accumulating a list of questions to ask candidates so I thought I would share them with the world so that I can dream of a candidate responding with my own words.  See also The Butterfly Effect 

CSS Basics: part 1

What are the 4 positioning options and what do they mean:

static: The default.  All objects positioned in order they are listed within the parent.  Default is left to right for block items.  Often used with float.

relative: Similar to static except that you can move an item “relative” to where it would naturally lie in static.  You could add top: -2px and the object would be 2 pixels higher relative to where it would be in static

absolute: positioned relative to the first parent (meaning climb the DOM until you find a parent that) is relative or static positioned

fixed: Similar to absolute but positioned relative to the browser (view port, specifically).  Remember when Facebook had a lower tray that was “fixed” to the bottom of the browser?  That’s how they did that.

Technically you also have inherit and initial, but I have yet to see a developer use them and I would check for drugs if they did.

Here is the whole definition: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Here is a better one: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

And do not read this one because if you are seen at work reading w3schools, you might get demoted on the spot.

What is specificity?

Short answer: 

How you determine which conflicting CSS rule applies to your DOM object.

Longer answer:

If this is our HTML: 

   <div class=”carousel weekly-ads” id=”fred-carousel”> </div>

 General element selector such as:

div {
color: red;
}

      will be overridden by a class selector such as:

.carousel {
color: chartreuse;
}

and a class selector will be over ridden by an id selector

#fred-carousel {
color: blue;
}

    and an id selector will be overridden by in-line styles (Big EWWWwwww)

<div style=”color: yellow”> </div>

Then within each of these tiers in the hierarchy, the more “specific” you are with the definition, the higher it is in the precedence scale. The following will override the single class selector above but will not override the id selector.

.carousel.weekly-ads {
color: blue;
}

Full answer:

Mozilla always does a thorough job https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

And Chris Coyier always skillfully gets to the point: https://css-tricks.com/specifics-on-css-specificity/

What is the box model?

This has been answered quite well many times previously so I will just give my short-short version:

All block elements are effectively rectangles made up of:

1. content surrounded by padding
2. padding surrounded by border
3. border surrounded by margin

And the size of each of these CSS values determines how much space the element takes up and therefore it effects how it interacts with its siblings and parents.  Kind of like puppies.

Again, the good: https://css-tricks.com/interview-questions-css/

The bad (don’t read this): http://www.w3schools.com/css/css_boxmodel.asp

And the thorough: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

I also like how concise this one is: http://learnlayout.com/box-model.html

That’s it for part 1.  If you are interviewing for a developer’s position beyond entry level, you’d better know these three concepts backwards and forwards.  Stay tuned for more advanced CSS posts as well as HTML, JavaScript, and general software engineering questions that I will call “other” for now.