5 useful css tips for javascript developers

JavaScript developers are sometimes not much familiar with the nuances of css. And they miss a simple css possibility and go in for a much complex JavaScript workaround.

I mastered JavaScript without mastering css. And I learned these 5 css tips very late and I regret I should have known them much earlier.

Please find the exampe code in this codepen.

1. relatively positioning parent when absolute positioning children

We may want to dynamically place a div on the screen, based on x & y co-ordinates. (In css, we use left and top instead of x and y). By default the co-ordinates are measured by keeping the root document as reference, which may not be ideal for our situation. We may want to position the div based on the parent container. In such cases, use the below one.

.parent {
  width: 400px;
  height: 300px;
  position: relative;
}

.child {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 100px;
  top: 100px;
}

When we use absolute positioning — it is based on the nearest parent with relative positioning. If there is no relative positioning in the parent hierarchy, then the ‘child’ will be positioned based on the root document.

2. Ignoring mouse event on nodes

Frequently, we add the same click event handler to multiple ‘divs’, and we will identify the target using ‘event.target.id’. But the problem is, if the particular div has child nodes, then ‘event.target’ will refer to the child node and not the original node on which we added the listener. We need to tell that the children should not receive any mouse events, and any event on it should be considered as the event on the parent node.

.child1 {
  pointer-events: none;
}

3. Making text non selectable

There are two reasons why we may want to make the text non selectable.

1. We dont want the user to copy the text easily.
2. The UI will not look good, if text selection happens.

We can use a simple css property to handle this.

.non-selectable {
  user-select: none;
}

4. Overflowing Text

Sometimes we load dynamic text on which we have little control, (say user entered text) on a fixed width div. Here we should not allow the text to flow outside the box, at the same time we cannot simply hide the overflowing text. It may give a false impression that the shown text is the full text. Ideally we need to fit the text within the box, and it should end with ellipses (three dots) to indicate that there are more text, which are not displayed due to space constraints. Ideally something like below.

.overflow {
  width: 70px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

Apart from text-overflow, we should also define width, white-space, and overflow. Otherwise it will not work for obvious reasons.

5. Force Wrap Text

There will be occasions, when we want to make the whole text visible, by text wrapping. By default text will wrap around whitespace characters. If we want to break at the middle of the word, it is still possible.

.forcewrap {
  border: 1px solid red;
  width: 50px;
  margin-left: 200px;
  overflow: hidden;
  word-break: break-all;
}

Please find the exampe code in this codepen.

Thanks for reading this.