What NOT to do in CSS

Sergio Behrends

VPE @ Aerolab

@Blunk sbehrends

#cssconfar

CSS

1994 Proposal

    
window.foreground = black
font.family = times
font.size = 12pt # alternative units are px, mm, cm
font.slant = normal
font.weight = normal

h1.font.size = font.size * 3
h2.font.size = font.size * 2.5
h3.font.size = font.size * 2
    
  

Håkon W Lie

xapo Wallet
xapo Wallet
xapo Wallet

Selectors

    
h1 {
  
}
    
  

Properties

    
h1 {
  color: #503EEF;
  text-transform: uppercase;
}
    
  

💣

    
h1 {
  color: #503EEF;
  text-transform: uppercase;
}
#nav ul li {
  float: left;
}
.dontUPPER {
  text-transform: none !important;
}
.red {
  color: red;
}
header li.red.otherRed {
  color: #CD1203;
}
.hide {
  display: none !important;
}
.no-padding {
  padding: 0 !important;
}
    
  

Communication

Product Owners

Designers️

Developers

♥️

Understanding Structure

Target Browsers

Devices & Resolutions

Browsers

Resolutions

Dynamic

Mobile First 📱


.btn {

  /* Mobile */

  ...

  @media screen and (min-width: 320px) {
    /* Tablet */
    ...
  }

  @media screen and (min-width: 768px) {
    /* Desktop */
    ...
  }
}

  

  

.btn {

}

Structure

styles.scss
    
@import "vars";
@import "btn";
    
  
_vars.scss
    
$purple: #503EEF;
$btn-size: 40px;
    
  
_btn.scss
    
.btn {
  font-size: $btn-size/2;
  border-radius: $btn-size;
  line-height: $btn-size;
  &.btn-purple {
    border: 3px solid $purple;
    color: $purple;
  }
}
    
  

├── fonts
│   └── ...
├── images
│   └── ...
└── styles
    ├── base
    │   ├── _base.scss
    │   ├── _fonts.scss
    │   ├── _text.scss
    │   └── _vars.scss
    ├── layout
    │   ├── _footer.scss
    │   ├── _header.scss 
    │   └── ...
    ├── styles.scss
    ├── modules
    │   ├── _btn.scss
    │   └── ...
    └── util
        └── mixins.scss

Rule your project

"C" for Cascade

👀


header.main-header nav > ul > li > ul > li a {
  text-decoration: none;
}

Selectors & Naming

SMACSS

BEM

OOCSS

Tooling Helps

Important

Don't use !important

#AVOIDUSINGIDS

Think in Modules

Top things to do in London

London is a treasure trove of brilliant activities and days out worth boasting about. We're completely spoilt for choice with things to do in London, whether you live and work in the capital or you’re planning a holiday, there's loads of ways to fill a free day with fun.

Top things to do in London

London is a treasure trove of brilliant activities and days out worth boasting about. We're completely spoilt for choice with things to do in London, whether you live and work in the capital or you’re planning a holiday, there's loads of ways to fill a free day with fun.

      
/* _card.scss */
.card {
  ...
  img {
    ...
  }
  h3 {
    ...
  }
  .content {
    ...
  }
}
/* _related.scss */
.related {
  .card {
    ...
  }
}
      
    
Top things to do in London

London is a treasure trove of brilliant activities and days out worth boasting about. We're completely spoilt for choice with things to do in London, whether you live and work in the capital or you’re planning a holiday, there's loads of ways to fill a free day with fun.

      
/* _card.scss */
.card {
  ...

  .related & {
    ...
  }
}
.card-image {
  ...
}
.card-title {
  ...
}
.card-content {
  ...
}
      
    
Learn from your code
Peer Review
CSS IS AWESOME

Got Hacks?

    
.animation {
  /* Little hack for better rendering */
  transform: translateZ(0);
}
    
  
    
/* Fixes strange issue with image sizing in IE */
_:-ms-fullscreen, :root .content image {
  min-height: 100%;
}
    
  
Thank you!
☕ ||️ 🍺

@Blunk sbehrends