Is it okay to use "Box" component for everything?

Question

I'm currently using emotion with styled-system plugin and documentation there is some example of Box component, which we can use to create some blocks of our layout, like :

<Box width={1/2}>
  <Box mb={2}>
   box 1
  </Box>
  <Box mb={2}>
   box 2
  </Box>
</Box>

In some other examples I also saw Text component which accepts props like fontSize, fontFamily and so on.

What is the purpose to create Text component if we can achieve same result with Box? And it will more shorter :

<Box width={100}>
  <Text fontSize={2}>text</Text>
</Box>

// vs 

<Box width={100} fontSize={2}>
  text
</Box>

Maybe it's because of some performance moments?

Answer 1

I think one of the reasons for this is semantics (human readability). At a glance you will not be able to tell what things are if they are all "boxes". Everything can inherit from box, but should not just be a box if there are better options to choose from, like Image or Flex.

You also run the risk of having too many props such as fontSize for something that only controls layout. Better to have things separated on the basis on what they represent, regardless of if they share the same properties.

This model is what standard html uses, as

<Box>
   <Text>Hello world</Text>
</Box>

is very much like

<div>
    <p>Hello world</p>
</div>