css-brush-up

View Github Repository Open presentation in a new window

scottrkehr

See all presentation from scottrkehr

css-brush-up

2 2

css-brush-up

CSS Brush Up - Specific to AE

On Github scottrkehr / css-brush-up

CSS Brush Up

https://github.com/aeo/style-guide

Scott Kehr

Which block is more expensive?

body .myClass div {
  ...
}
body div .myClass {
  ...
}

CSS processes right to left

Make sure far right element is specific.

Scalable CSS

Wrong Way

.arial {
  font: normal 11px/1.2 Arial, Helvetica, sans-serif;
}
.big {
  font-size: 15px;
}
<h1 class="arial big">Big Font</h1>

<h2 class="arial">Normal Font</h2>

Right Way

.header,
.title {
  font: normal 11px/1.2 Arial, Helvetica, sans-serif;
}
.title {
  font-size: 15px
}
<h1 class="title">Big Font</h1>

<h2 class="header">Normal Font</h2>

Scoping CSS

<html class="factoryBranding">
  <link href="/factory/stylesheets/brandstyles.css"/>
  <a class="button">My Button</a>
</html>

No need to scope if CSS is only used within scoped element

Wrong Way

.factoryBranding .button {
  ...
}

Right Way

.button {
  ...
}

Selector Depth

.main-nav ul li ul li div {
  ...
}

Stay away from complex selectors

This will become increasingly important when using CSS pre-processors like Stylus

.main-nav
  ul
    li
      ul
        li
          div

Undoing Styles

Don't do it. If this is necessary, then there is probably something wrong with your original style.

Other Bad Ideas

  • Stay away from !important
  • Don't use ID's for styling
  • Don't prepend selectors with elements

CSS Selector Profile

Open Webkit Select the Profile tab Select Collect CSS Selector Profile and click Start Load the page and click Stop Select your profile on the left

Mobile First CSS

What will your styles look like on a mobile platform? What could you do to improve the mobile experience? Are these changes feasible?

@media

Try basing media queries off of content instead of device display size

flexbox

Try using flexbox for grid layouts

Example

Stylus

http://learnboost.github.io/stylus/

http://visionmedia.github.io/nib/

Stylus Manifests

Old Manifest

/manifest/webcommon/category.json

{
  "src": [
    "<%= common_css %>category/category.css",
    "<%= common_css %>category/brandstyles.css",
    "<%= common_css %>category/widget.css"
  ],
  "dest": "<%= common_css %>category/min/category.css"
}

New Manifest

/webcommon.war/stylesheets/category/category.css

@import category
@import brandstyles
@import widget