---
title: 'What Are The Two Hard Things In Computer Science?'
seoTitle: 'The Two Hard Things in Computer Science'
author: 'Xinjiang Shao'
date: 2017-08-21T04:57:35.994Z
lastmod: 2020-02-10T21:16:12-06:00

description: 'Naming things and vertically centering things. Four ways to center in CSS — absolute, table cell, flexbox and grid — with tradeoffs, plus BEM naming.'
tags:
  - CSS
  - Frontend
  - Software Engineering
  - Best Practices
  - Naming
subtitle: 'Naming things and vertically centering things'

image: 'images/1.jpeg'
images:
  - 'images/1.jpeg'
  - 'images/2.png'

aliases:
  - '/what-are-the-two-hard-things-in-computer-science-777f2709406b'
---

Naming things and vertically centering things

![image](images/1.jpeg)

> _There are only two hard things in Computer Science: cache invalidation and naming things._> _—
> Phil Karlton_

Without any doubt, the tasks of vertically aligning UI components and creating a good CSS naming
scheme are a challenge. In front-end development, there are some unique restrictions which make
things even more difficult. In order to develop more reusable and widely supported UI components,
the Peapod team has had to devise their own development practices and naming strategies. **In this
article, I detail the various approaches to controlling vertical alignment and their respective
advantages and disadvantages. I then briefly discuss the Peapod development group's approach to
naming elements.**

### Vertically Center Things in 4 Ways

![image](images/2.png)

Centralize Peapod Logo and Brand Name

#### Absolute Positioning

**Pros**: Absolute positioning is supported by nearly all browsers. With absolute positioning, any
element can be positioned at any location.

**Cons**: Absolute positioning is not adaptable at all. If you add new elements, you will most
likely have to adjust the position of each existing element on the page. It can also be really hard
to debug a layout issue if you have many UI elements to manage. Finally, this method is not
recommended for use in any modern production websites.

#### Table Cell

**Pros:** Using CSS table layout is not a new concept. Back in the dark days, web developers used
`table` to make really flexible layout without introducing semantically incorrect elements into the
DOM.

**Cons:** Nesting tables can be very complex. Modern methods like Flexbox and CSS Grid make the code
cleaner and easier to maintain.

#### Flexbox

**Pros:** Flexbox is extremely flexible, works in all modern browsers, and makes the creation of a
responsive UI easy.

**Cons:** In each flexbox, you can only do a row or column style. If you have more complex layouts,
you may end up with nested flexboxes.

#### CSS Grid

**Pros:** CSS Grid was created to overcome the issues related to flexbox. It results in a cleaner
DOM structure even when used with very complex layouts.

**Cons:** CSS Grid is newer and not yet supported by all modern browsers.

### Naming things in CSS

At Peapod, we're using the Blocks, Elements, and Modifiers (BEM) CSS methodology to make our UI
elements modular and reusable.

e.g A Sample DOM
``<**div**` `class="message-box_container message-box--error">     <**div**` `class="message-box_icon-container">       <**span**` `class="message-box_icon message-box_icon--triangle"></**span**>     </**div**>````  <**span**` `class="message-box_message"></**span**>   </**div**>``

We would use the following SASS snippet and compile into CSS.
``.message-box` `{````  &_container {````  }````  &_icon {````  }````  &_icon--triangle {````  }````  &_message {````  }````}````.message-box--error {````  &.message-box` `{````   &_container {````    }````  }````  .message-box` `{````    &_icon {````    }````    &_icon--triangle {````   }````   &_message {````   }````  }````}``

By using the above methodology we gain the structured aspect of object oriented CSS but we provide a
semantic way to limit ourselves to the above restrictions. A nice side effect for this methodology
is that it will be easier to recognize the priority of the styles and the depth of CSS selectors
will be short most of the time.