2

I am relatively new in web development, but I am trying always to find the best way and make my code even CSS and HTML clean. So I've started exploring best practices.

First of all lets start with em and rem. Most of sites nowadays still used pixels instead of relative units. It works correctly, mobile phones can scale pixels to the real pixels according to the density and other factors.
First of all pixels are static units. And most of sites are not scaling when font size changes in browser settings.
Personally I found em and rem useful for modular page layout.
Each top level module has font-size specified in rem units, but almost every dimension of children elements are specified in em units.
Here is small example

  #home {
  font-size: 1.5rem;

}
.overlay-intro {
  display: table;
}
   .intro {
      padding: 1em 1em;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .intro .highlighted-title {
      color: #FFC107;
    }
    .intro h1 {
      margin-bottom: 0.2em;
      font-size: 3.5em;
    }
    .intro .firtst-title-part {
      color: #52b3d9;
    }
    .intro .second-title-part {
      color: #68c3a3;
    }
    .intro .code-char {
      font-size: 1.3em;
      color: #68c3a3;
    }
    .intro p {
      font-size: 1.3em;
      color: #f7f7f7;
      margin-bottom: 2em;
    }
    .intro .primary-color-title {
      color: #52b3d9;
    }
    .intro-sub {
      color: #fff;
      font-size: 1.5em;
      margin-bottom: 1em;
    }

I am using relative units almost everywhere even for setting height and width

.social-icons a i {
  position: relative;
  color: #fff;
  font-size: 1.2em;
  margin: 0 7px;
  line-height: @socialIconSize;
  text-align: center;
  width: @socialIconSize;
  height: @socialIconSize;
}

And I think maybe this too much ?

And HTML

<!-- Intro Section -->
<section id="home">
<div class="overlay-intro">
   <div class="intro">
    <div class="intro-sub">
    </div>
    <div class="intro-title">
      <h1></h1>
    </div>
    <div class="intro-description">
      <p></p>
    </div>
    <div class="social-icons">
      <ul class="list-inline">
        <li><a href="#"><i class="fa fa-github"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
      </ul>
    </div> <!-- /.social-icons -->
  </div>
</div>
</section>

As you can see everything is specified in em only root div #home has font-size in rem.

When does this make sense ?

@media only screen and (max-width : 768px) {
    #home {
        font-size : 1.4rem;
    }
}

I need to change only one property of the class to make whole module (#home) to change the size of its components and it works pretty well, in case of pixels I had to override a lot of properties, but in case of relative units it makes some kind of relation between the blocks inside the module.

But on the other hand from DRY, OOCSS, BEM perspective this approach violates most of important rules like styles separation from content, rare using of location-dependent styles, avoid nesting, using single class for common properties and others.

But in my case I've violated most of this rules, because my css styles somehow depend on html structure, because I used relative units, and if apply some of this styles to another element inside another module (root container) with different font size, I won't get desired result.
So in my example most of classes are completely unreusable, of course I can use LESS and mixins and append specific mixin where I need it, but at the end it will be converted into plain old CSS.

Please help to find right way to follow, should I get rid relative units for sake of DRY, OOCSS, BEM ... or do not follow these approaches at all and left as it is ? Maybe I am using relative units incorrectly or using them overmuch, and they should be used only with font size specific classes, not for setting width and height of elements ? Any help is highly appreciated.

  • 1
    If your CSS is machine generated from legible sources, I'd equate it to caring about the looks of machine code after compiling a language, in that it mostly matters if you need to inspect it yourself after the fact. – Lars Viklund Jul 31 '16 at 19:14
  • 1
    Trying to make something "clean" when dealing with a platform that is beyond "filthy" is going to be a source of much mental anguish. – whatsisname Jul 31 '16 at 21:17
  • @LarsViklund, thanks for answer, I agree with you, but still if its compiled into CSS, I should consider performance. What about using relative units ? – CROSP Jul 31 '16 at 21:19
1

You're overthinking it.

When you are using relative units, you must ask yourself: “relative to what?” In the case of rem, the unit is relative to the font size of <html> element. In the case of em, the unit is relative to the font size of the currently styled element. In both cases, the font size of the direct parent is irrelevant, which means that an element such as:

span.highlight {
    font-size: 2rem;
    padding: .5em;
}

will appear the same whenever it is in the page, would it be in a title, or in a footer, or in an ordered list. Unlike you asserted in your question, the code is perfectly reusable; while using it on a different page and in a different context could lead to a different display, this is simply how CSS works; if you need a pixel-perfect layout, you need to put the content within a PDF document, not an HTML page.

When does this make sense ?

@media only screen and (max-width : 768px) {
    #home {
        font-size : 1.4rem;
    }
}

Even if rem/em is used consistently, media queries based on the width of the page make sense as well if you need your layout to be responsive. It's not about zooming and scaling, it's about displaying different information, or displaying same information differently based on the width of the page. A wide layout can display three or more columns; a narrow layout won't even be able to show two columns side by side while remaining usable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.