Snippets

What is CSS BEM?

The BEM methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues. BEM stands for Block Element Modifier which is an explanation for its structure. A Block is a standalone component that is reusable across projects and acts as a “namespace” for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.

/* block component */
.block {
}
 
/* element */
.block__element {
}
 
/* modifier */
.block__element--modifier {
}

Here is an example with the class names on markup:

<nav class="navbar">
  <a href="/" class="navbar__link navbar__link--active"></a>
  <a href="/" class="navbar__link"></a>
  <a href="/" class="navbar__link"></a>
</nav>

In this case, navbar is the Block, navbar__link is an Element that makes no sense outside of the navbar component, and navbar__link--active is a Modifier that indicates a different state for the navbar__link Element.

Since Modifiers are verbose, many opt to use is-* flags instead as modifiers.

<a href="/" class="navbar__link is-active"></a>

These must be chained to the Element and never alone however, or there will be scope issues.

.navbar__link.is-active {
}

• Alternative solutions to scope issues like CSS-in-JS

What are the advantages of using CSS preprocessors?

CSS preprocessors add useful functionality that native CSS does not have, and generally make CSS neater and more maintainable by enabling DRY (Don’t Repeat Yourself) principles. Their terse syntax for nested selectors cuts down on repeated code. They provide variables for consistent theming (however, CSS variables have largely replaced this functionality) and additional tools like color functions (lighten, darken, transparentize, etc), mixins, and loops that make CSS more like a real programming language and gives the developer more power to generate complex CSS.

• They allow us to write more maintainable and scalable CSS
• Some disadvantages of using CSS preprocessors (setup, re-compilation time can be slow etc.)

Using flexbox, create a 3-column layout where each column takes up a col-{n} / 12 ratio of the container.

<div class="row">
  <div class="col-2"></div>
  <div class="col-7"></div>
  <div class="col-3"></div>
</div>

Set the .row parent to display: flex; and use the flex shorthand property to give the column classes a flex-grow value that corresponds to its ratio value.

.row {
  display: flex;
}
 
.col-2 {
  flex: 2;
}
 
.col-7 {
  flex: 7;
}
 
.col-3 {
  flex: 3;
}

Can you name the four types of @media properties?

• all, which applies to all media type devices
• print, which only applies to printers
• screen, which only applies to screens (desktops, tablets, mobile etc.)
• speech, which only applies to screenreaders

What are the advantages of using CSS sprites and how are they utilized?

CSS sprites combine multiple images into one image, limiting the number of HTTP requests a browser has to make, thus improving load times. Even under the new HTTP/2 protocol, this remains true.

Under HTTP/1.1, at most one request is allowed per TCP connection. With HTTP/1.1, modern browsers open multiple parallel connections (between 2 to 8) but it is limited. With HTTP/2, all requests between the browser and the server are multiplexed on a single TCP connection. This means the cost of opening and closing multiple connections is mitigated, resulting in a better usage of the TCP connection and limits the impact of latency between the client and server. It could then become possible to load tens of images in parallel on the same TCP connection.

However, according to benchmark results, although HTTP/2 offers 50% improvement over HTTP/1.1, in most cases the sprite set is still faster to load than individual images.

To utilize a spritesheet in CSS, one would use certain properties, such as background-image, background-position and background-size to ultimately alter the background of an element.

What is the difference between ’+’ and ’~’ sibling selectors?.

The General Sibling Selector ~ selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements:

div ~ p {
  background-color: blue;
}

The Adjacent Sibling Selector + selects all elements that are the adjacent siblings of a specified element.

The following example will select all <p> elements that are placed immediately after <div> elements:

div + p {
  background-color: red;
}

What is a focus ring? What is the correct solution to handle them?

A focus ring is a visible outline given to focusable elements such as buttons and anchor tags. It varies depending on the vendor, but generally it appears as a blue outline around the element to indicate it is currently focused.

In the past, many people specified outline: 0; on the element to remove the focus ring. However, this causes accessibility issues for keyboard users because the focus state may not be clear. When not specified though, it causes an unappealing blue ring to appear around an element.

In recent times, frameworks like Bootstrap have opted to use a more appealing box-shadow outline to replace the default focus ring. However, this is still not ideal for mouse users.

The best solution is an upcoming pseudo-selector :focus-visible which can be polyfilled today with JavaScript. It will only show a focus ring if the user is using a keyboard and leave it hidden for mouse users. This keeps both aesthetics for mouse use and accessibility for keyboard use.

What is the CSS Box Model?

CSS Box Model

When the browser engine lays out the document, it will treat each element as a rectangular Box according to the Box Model of CSS. This Box is composed of content, padding, border and margin.

Content refers to the real content of the element, such as the real content of text or pictures. We can adjust the width and length of the content through width and height. Inside the border is the padding. If you increase the padding, the distance between the content and the border will become larger; and outside the border will be the margin. If you want to space it out from other elements The distance needs to be achieved by setting the distance.

In fact, in the history of browsers, there are two kinds of box models, one is content-box (W3C standard box model), and the other is border-box (IE box model). At present, the box model can be freely set through the box-sizing of css. If not set, the default value will be content-box (after all, IE has already retired).

The difference between the two is that the two box models have different standards for calculating the width and height of the box. The width and height of the content-box box will only contain content, not padding and border; but the box model of border-box will include content, padding and border, as shown in the figure below.

What is the specificity of CSS selectors

CSS has many selectors, such as: id, class, when an element is selected by different selectors, the concept of specificity of CSS selectors is very important, the choice with the highest specificity of CSS selectors, the style of the selector will appear first. This article will talk about the detailed specificity of most selectors.

Specificity score

Before learning the specificity of each selector, you need to understand the concept of specificity scoring. Each style composed of selectors will have an aggregate score, and the one with the highest score will be applied. However, when we are writing CSS, we should choose the one with a lower score instead of a higher score; because if there is a more important style in the future, it will be easier to add . If a certain style is written as the most important at the beginning, it will become difficult to add other styles in the future.

Selector score

Selector specificity

• An example of common specificity priority is as follows

!important > inline styles > id > class = pseudo-element > type selector = pseudo-class > generic

In addition to the score calculation, there are a few additional features of style specificity

• !important scores the heaviest, so please use with care
• If the specificity is the same, the style that occurs last takes effect
• If it is through inheritance, the style specificity will be the lowest

Practical examples

Use the following example to understand how the specificity score of selectors is calculated

<a class="my-class another-class" href="#">
  A link
</a>

// 1
a {
  color: red;
}
 
// 1+10 = 11
a.my-class {
  color: green;
}
 
// 1+10+10 = 21
a.my-class.another-class {
  color: black;
}
 
// 1+10+10+10 = 31
a.my-class.another-class[href] {
  color: purple;
}
 
// 1+10+10+10+10 = 41
a.my-class.another-class[href]:hover {
  color: lightgrey;
}
 
// From the above score, we can know that the above Link is purple, and when the cursor moves to this element, it will become light gray

source

• https://web.dev/learn/css/specificity/

Quick rules

Assuming the browser has already determined the set of rules for an element, each rule is assigned a matrix of values, which correspond to the following from highest to lowest specificity:

• Inline rules (binary - 1 or 0)
• Number of id selectors
• Number of class, pseudo-class and attribute selectors
• Number of tags and pseudo-element selectors

When two selectors are compared, the comparison is made on a per-column basis (e.g. an id selector will always be higher than any amount of class selectors, as ids have higher specificity than classes). In cases of equal specificity between multiple rules, the rules that comes last in the page’s style sheet is deemed more specific and therefore applied to the element.

What Are the Values of Display in CSS? What Is the Difference Between inline, block and inline-block? What Is the Difference Between display:none and visibility:hidden?

In css interview questions, display value is a very basic question, everyone must be very familiar with this type of question. The extended question will ask what the difference is between inline elements and block elements (inline and block), flex and grid, etc.

What is the display property?

CSS display property is used to determine whether an element will have block or inline characteristics. If the value of display is set to grid or flex, it will determine how the child elements of this element will be arranged.

What are the values of display?

The most common values of display are block, inline, inline-block, none, flex, grid, and table.

What is the difference between block, inline, and inline-block?

The previous paragraph mentioned that the display property can be used to determine whether an element will have block or inline characteristics. Generally, most elements will have a default display property. For example, the default of div is block, and the default of span is inline.

display: block

The element with the display value of block is also called a block element, and common block elements are <div>, <h1>, <p>. Block elements will inherit the width of the parent element by default, and will occupy a line by themselves; the height is usually based on the height of the element, and you can also change the width and height of the element by setting the width, height, max-width, and max-height CSS properties.

display: inline

The element with the display value of inline is also called an inline element, common inline elements are <a>, <img>, <span>, and the use scenario may be used in a paragraph of emphasized text. Inline elements themselves will not occupy a line by themselves, but will be arranged in the same column with other inline elements. The element cannot change the height and width by setting the width, height, max-width, and max-height values, and the height and width will be stretched according to the content of the element itself.

display: inline-block

The inline-block combines the characteristics of inline elements and block elements. It will be arranged in the same line like inline elements, but at the same time it has the characteristics of block elements that can set the width and height.

The following figure shows the comparison of these three:

• The top is display: block, the element will occupy a line by itself
• The middle is display: inline, the element will be arranged in the same line
• The bottom is display: inline-block, the element will be stretched according to the content, and will be arranged in the same line

Bonus question: What is the difference between display:none and visibility:hidden?

none is also a value of display, and setting the display value to none will hide the element. In CSS, there is another CSS property setting: visibility:hidden can achieve a similar effect.

But there are important differences between the two. display:none will completely remove the element from the page, including the space it occupies, while visibility:hidden will only hide the element, but the space occupied by the element will still be reserved, and the element will still affect the page layout.

The following figure shows the difference between display:none and visibility:hidden:

• The left figure is visibility:hidden, the element will be hidden, but the space occupied will still exist
• The right figure is display:none, the element will be hidden, and the space occupied will also be removed

Explain CSS Position Property

CSS Position Values

CSS position is an important property in CSS used to control the page display position of HTML elements. There are five possible values for position: static, relative, absolute, fixed, and sticky. In a frontend interview, candidates may be asked to describe the differences between these values.

static

If no position is set, the default value of the position is static, which means that the element will be arranged according to its original element position. In the static situation, setting top, bottom, left, right and z-index are invalid.

relative

relative is a relative positioning. It can move the element relative to its normal position. When the element is set to position: relative, you can use the top, bottom, left, and right properties to control the offset of the element relative to its normal position (original position).

See the following example:

• The left is the default arrangement of pink and block without adding the position value.
• The right is the arrangement of block after adding position: relative. You can see that the block moves down 30px from its original position.

Code example:

<div id="pink"></div>
<div id="block">block</div>
<div id="pink"></div>
<div id="pink"></div>
<div id="pink"></div>

#pink {
  width: 200px;
  height: 200px;
  background-color: pink;
}
 
#block {
  position: relative;
  top: 30px;
  width: 100px;
  height: 100px;
  background-color: gray;
}

absolute

Unlike relative, absolute means absolute positioning. That is to say, the element will not appear in the relative position according to the general arrangement rules, but will jump out of the original arrangement and be positioned according to a reference point to appear in an absolute position.

The reference point is the closest parent element with a position value other than static. If there is no parent element with a position value, the element will be positioned relative to the html object.

See the following example:

• The left is the default arrangement of blue, pink, and block without adding the position value.
• The middle is the arrangement of block after adding position: absolute. However, because the parent element pink does not have a position value, you can see that the block is positioned according to the outermost html as the reference point and positioned 30px below.
• The right is the arrangement after adding position: relative to pink. Therefore, pink will move down according to its original position, and block will move down 30px because the parent element pink has a position value at this time, so it will set pink as the reference point.

Code example:

<div id="blue"></div>
<div id="pink">
  <div id="block">block</div>
</div>

#blue {
  width: 200px;
  height: 200px;
  background-color: blue;
}
 
#pink {
  position: relative;
  top: 30px;
  width: 200px;
  height: 200px;
  background-color: pink;
}
 
#block {
  position: absolute;
  top: 30px;
  width: 100px;
  height: 100px;
  background-color: gray;
}

fixed

fixed is also a fixed positioning. The difference between fixed and absolute is that both are fixed positioning, but the difference is that the reference point of fixed will be the browser window itself, which means that no matter how the user scrolls the web page, the fixed-positioned element will always maintain the same position.

See the following example:

• The left is the arrangement of pink position set to relative, block position set to absolute.
• The right is the arrangement of block position set to fixed. You can see that the block is different from the left side set to absolute. The block will always maintain the same position as the browser window.

Code example:

<div id="blue"></div>
<div id="pink">
  <div id="block">block</div>
</div>

#blue {
  width: 200px;
  height: 200px;
  background-color: blue;
}
 
#pink {
  position: relative;
  top: 30px;
  width: 200px;
  height: 200px;
  background-color: pink;
}
 
#block {
  position: fixed;
  top: 30px;
  width: 100px;
  height: 100px;
  background-color: gray;
}

sticky

sticky is a special relative positioning. In some cases, the element behaves like fixed positioning, while in other cases it still maintains relative positioning. The element will be fixed at a specific point when the page scrolls to it, but if the page rolls back to the original position of the element, the element will return to relative positioning.

See the following example:

• On the left, the block element will behave like relatively positioned until it reaches a position 30px away from its original position. It will maintain its relative positioning until that point.
• On the right, the block element will maintain its fixed position until it reaches a position 30px away from its original position. At that point, it will be positioned 30px away from its original position.

Code example:

<div id="pink"></div>
<div id="block">block</div>
<div id="pink"></div>
<div id="pink"></div>
<div id="pink"></div>

#pink {
  width: 200px;
  height: 200px;
  background-color: pink;
}
 
#block {
  position: sticky;
  top: 30px;
  width: 100px;
  height: 100px;
  background-color: gray;
}

What units are there in CSS? How do I use them?

In CSS, there are many different units, such as: px, em, rem, etc. During the interview, you may be asked about the difference between these units in CSS and how to use them in what context.

The difference between px, em, rem

px: The most common unit, also an absolute unit. According to MDN, the actual length of 1px will be 1/96 of an inch.

em: It is a relative unit. It is calculated differently when used in fonts and general length units. The following explanations are based on two different scenarios.

• Used in font-size: It will be multiplied according to the font size of the parent layer. For example: font-size: 2em means that the font size of the current element is twice the font size of the parent element.
• Used in width: it will be a multiple of the font size of the current element. For example, when width: 2em is set, width will be the font size of the current element multiplied by 2. If the font size of the element is 10px, width will be is 20px. If the font size of the element is not set, the font size of the parent element will be used by default. In other words, if the font size of the parent element is 30px and we have not set the font size of the element, then width: 2em will be is 60px.

In the following code example, the font size in the div is 20px, because the parent element (body) is 10px, the 2em element of the div element will be set to 10px * 2. And div width will be 40px, because the font size of the element is 20px, so width: 2em, will be 20px * 2.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>em</div>
</body>
<style>
body {
  font-size: 10px;
}
div {
  font-size: 2em;
  width: 2em;
  height: 100px;
  border: 1px solid red;
}
  </style>
</html>

rem: Similar to em, it is also a relative unit. The full name of rem is root em. The root here refers to the root element, and the root element is html; in other words, rem is based on html for calculations. Its calculation is similar to em, except that no matter where rem is used, it is calculated based on the root element, not the parent element of the element.

In the following code example, the width of div or p will be 100px. Since the width of the root element (html) is 50px, 2rem will be 50px * 2.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JS Bin</title>
  </head>
  <body>
    <div>
      <p>rem</p>
    </div>
  </body>
  <style>
    html {
      font-size: 50px;
    }
    body {
      font-size: 10px;
    }
    div {
      font-size: 2rem;
      width: 2rem;
      height: 100px;
      border: 1px solid red;
    }
    p {
      font-size: 2rem;
      width: 2rem;
    }
  </style>
</html>

How to choose px, em, rem?

The advantage of px is that it is an absolute unit, and the size and length can be set accurately during development, but the disadvantage is that it cannot be changed as the page size changes.

em and rem are relative units, which are more flexible than px. The existence of rem is mainly to solve a problem of em. Since there will be inheritance problems when using em, and each element will automatically inherit the font of its parent element size, if the layout design is multi-layered, it may cause confusion when using em.

Using rem allows us to avoid this problem, regardless of any level of elements, the reference point for comparison will be the root element, which is suitable for use in RWD or mobile device development. In addition, some of the defined lengths of Tailwind CSS, a very popular CSS framework in recent years, also use rem for calculation, as shown in the image below.

What are pseudo-classes and pseudo-elements?

Pseudo-classes

Pseudo-classes are keywords added to selectors that specify a special state of the selected element(s). For example, the :hover pseudo-class applies when the user mouses over the element.

Four common pseudo-classes

:hover

When the user’s mouse or touchpad device is placed on the element, we can use :hover to change the style of the element.

:link, :visited

:link and :visited are used on <a> elements that contain the href attribute. :link can adjust the style of the link that the user has not browsed, and :visited can change the style of the link that the user has browsed.

<a href="https://google.com">google.com</a>
<a href="https://www.explainthis.io">explainthis.io</a>

a:link {
  color: blue;
}
 
a:visited {
  color: red;
}

:link and :visited style

:disabled, :enabled

If you want to set a button element to the disabled state, you can use :disabled and :enabled to adjust the style of the button when it is in the disabled or enabled state.

:first-child, :last-child

If you want to find the first or last item in HTML, you can use :first-child and :last-child. These pseudo-classes will return the first or last element in a group of sibling elements.

<div>
  <p>first p</p>
  <p>second p</p>
  <div>...</div>
</div>
<div>----------------</div>
<div>
  <p>first p</p>
  <div>...</div>
  <div>...</div>
  <p>second p</p>
</div>

p:first-child {
  background: lightskyblue;
  font-weight: bold;
}
 
p:last-child {
  background: lightyellow;
  font-weight: bold;
}

:first-child abd :last-child style

Pseudo-elements

Pseudo-elements can be used to add additional elements to the document without having to add additional HTML. It has many uses, which we will introduce in the next section.

Four common pseudo-elements

::before, ::after

When we use ::before and ::after pseudo-elements on an element, a child element will be generated in the element, but the content must be defined in the pseudo-element, which can be any string, even an empty string.

At the same time, we can also adjust the style of the content, as shown in the following code.

<span class="text">This is ExplainThis</span>

.text {
  background-color: #171923;
  color: white;
}
 
.text::after {
  content: " ♥ Interview Guide";
  background-color: #ffba10;
}

::before and ::after style

::marker

Using ::marker can adjust the style of the list or summary item (summary) symbol and number.

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Strawberry</li>
</ul>

ul ::marker {
  color: red;
  content: "😊";
}

::marker style

::placeholder

When we are designing forms, we will add some elements, such as input, with placeholder text, and ::placeholder can be used to set the style of this placeholder text.

<input type="email" placeholder="[email protected]" id="email" />

input::placeholder {
  color: darkcyan;
}

::placeholder style

::first-letter

We can use ::first-letter to set the style of the first letter of the text.

<p>Hello ExplainThis</p>

p::first-letter {
  color: orange;
}

::first-letter style

How to Center a Div with CSS?

To center a div with CSS, there are many ways to do it. In this article, we will introduce five ways to center a div with CSS.

• The first 6 ways are used to center a div element horizontally and vertically in a container. The screen is as follows:

Center a div element horizontally and vertically

• The 7th method is used to center a line of text horizontally and vertically in a container. The screen is as follows:

Center a line of text horizontally and vertically

Looking to practice more frontend interview questions? We recommend GreatFrontEnd, the best platform for honing your frontend interview skills!

7 Ways to Center a Div with CSS

In the following, we will see the implementation and explanation of these seven ways:

1. Use display: flex + align-items: center + justify-content: center

• Set the parent element display to flex
• Set the align-items property to center, which means that the child elements are vertically aligned in the middle of the parent element
• Set the justify-content property to center, which means that the remaining space is evenly distributed on both sides of the child elements, and the child elements are horizontally aligned in the middle

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
}v

2. Use display: flex + margin: auto

• Set the parent element display to flex
• Set the child element margin to auto, which will horizontally and vertically align the child element to the middle

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
}
 
.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
  margin: auto;
}

3. Centering with margin-inline

Besides using display: flex, there are other ways to use margin for centering. By setting both margin-left and margin-right to auto, the browser will automatically distribute the available space on the left and right sides, pushing the element to the center. Make sure to use max-width: fit-content to ensure the element’s width doesn’t stretch horizontally beyond its content.

.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

Additionally, CSS offers the margin-inline property, which is equivalent to setting both margin-left and margin-right at the same time. Therefore, the above CSS can be rewritten as follows:

.element {
  max-width: fit-content;
  margin-inline: auto;
}

4. Use display: grid + place-content: center

• Set the parent element display to grid
• Use the place-content property in the parent element, and set its value to center, which will center its child elements in both the horizontal and vertical directions

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  display: grid;
  place-content: center;
}

Note

The place-content: center property is actually equivalent to setting the justify-content and align-content properties of the grid container to center at the same time. The justify-content property controls the horizontal alignment, and the align-content property controls the vertical alignment. Therefore, by setting the justify-content and align-content properties to center at the same time, you can achieve the effect of aligning all the elements in the grid container horizontally centered and vertically centered.

5. Use position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)

• Set the parent element to position: relative, which is convenient for calculating the relative position of the child element
• Set the child element to position: absolute, which will be positioned relative to the nearest positioned parent element
• Set the top property to 50%, which will move the top edge of the child element to the middle of the parent element
• Set the left property to 50%, which will move the left edge of the child element to the middle of the parent element
• Set transform: translate(-50%, -50%), which will move the child element to the left and up by 50% of the distance, so that it is vertically and horizontally centered

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  position: relative;
}
 
.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Note

The position: absolute usage is recommended to refer to this article for explanation. In short, when the position of an element is set to absolute, it will be positioned relative to the nearest positioned parent element.

The top: 50% and left: 50% properties are used to set the top and left edges of the element to the middle of the parent element. The transform: translate(-50%, -50%) is a transformation property in CSS, used to translate elements. Its effect is to translate the element 50% of its width horizontally and 50% of its height vertically.

Because we set the top and left properties of the element to 50%, the center point of the element has already been in the center of the parent element. However, since the default alignment of the element is the upper left corner, the upper left corner of the element coincides with the center of the parent element. Therefore, we use transform: translate(-50%, -50%) to translate the element back to the center, so that the element is completely centered.

6. Centering in the Browser Window

Beyond centering elements within their parent containers, we often need to center elements within the browser window itself. This is particularly common for elements like banners that are fixed to a specific position in the browser. Here’s how you can do it:

.element {
  position: fixed;
  inset: 0px;
  margin: auto;
}

By using position: fixed, we anchor the element within the viewport. The inset: 0px property sets the top, right, bottom, and left offsets to zero, effectively stretching the element to cover the entire screen. Then, by applying margin: auto, the element is centered within this space.

7. Use text-align: center + line-height

• Set the parent element to text-align: center, which means that the text is horizontally centered
• Set the line-height property of the child element to the same height as the parent element, which means that the text is vertically centered in the element

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  text-align: center;
}
 
.inside {
  background-color: pink;
  line-height: 400px;
}

Related Article

• Explain CSS Position Property

What is StyleX? What Problems Does It Solve? When Should You Use It?

Meta recently open-sourced StyleX, their internal CSS solution, sparking community discussion. StyleX isn’t entirely new—Frank Yan mentioned it during his Building the New Facebook with React and Relay talk at React Conf 2019. What’s changed is that developers can now actually use it.

But here’s a question worth considering: if someone asked you in an interview, “What problems does StyleX solve and when should you use it?” could you give a clear answer? If you’re not quite there yet, let’s work through this together.

What StyleX Actually Does

StyleX is a styling system that compiles your styles into atomic CSS. Think of it this way: instead of writing traditional CSS classes that bundle multiple properties together, atomic CSS breaks everything down into single-purpose classes.

Atomic CSS solves several fundamental problems with traditional CSS, particularly around maintainability. But to understand why, we need to dig deeper into what makes CSS difficult to manage at scale.

The Colocation Problem

One major benefit StyleX provides is what developers call “colocation”—keeping your styles close to the components that use them. When you modify styles in an atomic system, you can delete class names without worrying about breaking other elements elsewhere in your codebase.

But wait—don’t tools like CSS Modules or Svelte’s scoped styles already solve this? They do limit scope, preventing the classic “change A, break B” problem. However, they still face a fundamental scaling issue.

Here’s where atomic CSS introduces a key principle: “Define once, use everywhere.” Instead of creating new stylesheets for every component variation, you define atomic styles once and combine them as needed. This transforms CSS from an O(n) problem to an O(logn) one.

Consider how this works in practice. In traditional CSS, every new design pattern often means writing new CSS. With atomic CSS, you’re increasingly reusing existing atomic classes rather than creating new ones.

The Deterministic Resolution Problem

Now let’s examine a trickier issue that StyleX addresses: deterministic resolution. To understand this, consider a simple CSS puzzle.

What color do you think this span will be?

// In your CSS file
.blue {color: blue;}
.red {color: red;}
 
// In your HTML
<span class="red blue">What color is this?</span>

If you guessed blue because it appears last in the class attribute, you’d be wrong. The span will be red because CSS precedence depends on the order in the stylesheet, not the HTML class order.

This gets more complex when styles come from different files:

// blue.css
.blue {color: blue;}
 
// red.css
.red {color: red;}
 
// HTML
<span class="red blue">What color is this?</span>

Now you can’t determine the color without knowing how your build system bundles these CSS files. For developers, this uncertainty creates a significant problem—you can’t predict the outcome just by looking at your code.

How StyleX Solves This

StyleX’s compiler handles this uncertainty for you. When you write:

<span {...styles.props(styles.red, styles.blue)}></span>

You can confidently predict the result: the span will be blue because the later argument takes precedence, regardless of how the underlying CSS gets bundled.

Compare this to Tailwind CSS, which still faces this deterministic resolution challenge:

// Tailwind example
<span class="text-blue-100 text-red-100">What color is this?</span>

The community has created tools like Tailwind Merge to address this, but that means additional dependencies and maintenance overhead.

The Specificity War Problem

Traditional CSS approaches often lead to what Frank Yan calls “specificity wars.” As projects grow and teams refactor code multiple times, you might see selectors like this:

.coolest-redesign .cooler-redesign .cool-redesign .cool {
  // ...
}

This happens because developers increase specificity to override existing styles, leading to increasingly complex and unmaintainable CSS.

I’ve personally encountered this in microfrontend architectures where the main application’s styles unexpectedly override child application styles, or vice versa. When teams span different time zones, resolving these conflicts can take days of back-and-forth communication.

When Should You Use StyleX?

So when does StyleX make sense for your project? Consider the scale and complexity of what you’re building.

For small projects with simple styling needs and single-developer maintenance, vanilla CSS works perfectly well. Even DHH continues choosing vanilla CSS for new projects without issues.

However, StyleX shines in large, complex projects with multiple teams, frequent iterations, and extensive styling requirements. The benefits become especially clear when you’re dealing with cross-team, cross-timezone collaboration where coordination overhead significantly impacts productivity.

StyleX vs Other Atomic CSS Solutions

What advantages does StyleX offer over alternatives like Tailwind? Two key differentiators stand out:

First, deterministic resolution works out of the box without additional tools or libraries. Second, StyleX provides type safety, catching styling errors at compile time—something particularly valuable in large codebases where small mistakes can be costly.

While Tailwind and other atomic CSS solutions solve many of the same core problems, StyleX’s built-in handling of these edge cases makes it especially suited for enterprise-scale applications where reliability and predictability are paramount.

The question isn’t whether other approaches can work—they often can. Rather, StyleX provides a more streamlined, maintainable approach to challenges that inevitably arise in complex, large-scale projects.

Support ExplainThis

If you found this content helpful, please consider supporting our work with a one-time donation of whatever amount feels right to you through this Buy Me a Coffee page, or share the article with your friends to help us reach more readers.

Creating in-depth technical content takes significant time. Your support helps us continue producing high-quality educational content accessible to everyone.