front-end designer

at

front-end

at

@ignaciodenuevo

@carmenansio

Cascade and inheritance

The order of CSS rules matter

initial | inherit | unset

h1 {
    color: black;
}

* {
    color: red;
}

Example

Heritage

1/2

Example

Computed

Heritage

1/2

Specificity

determines which CSS rule is applied by the browsers.

0 | 0 | 0 | 1

element {}

::pseudo-element {}

0 | 0 | 1 | 0

.class {}

[attribute] {}

:pseudo-class {}

0 | 1 | 0 | 0

#id {}

1 | 0 | 0 | 0

property: !important;

style="property: in-line;"

0 | 0 | 0 | 0

>, +, *, ~, :not()

@media

Specificity Graph

• Sass nesting.

• Class concatenation.

• Using ID's.

• Inline styles.

• !important.

Keep specificity levels low

In order to avoid cascade problems.

body {
  &.header {
    &.nav {
      ul {
        li {
          a#link {
            color: red !important;
          }
        }
      }
    }
  }
}

body.header.nav ul li a#link {
  color: red !important;
}

1 | 1 | 2 | 4

Keep specificity levels low

Specificity shame

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div class="frankestein">
                        Igor
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

0 | 0 | 1 | 0

.frankestein {
  color: green;
}

div div div div div div div div div div div div {
  color: red;
}

HTML

CSS

class specificity

0 | 0 | 0 | 12

div's specificity

!important

Adding !important to a declaration is the same as declaring all of its sub-properties as !important.

.card {
  margin: 1em !important;
}

.card {
  margin-bottom: 1em !important;
  margin-left: 1em !important;
  margin-right: 1em !important;
  margin-top: 1em !important;
}

=

Naming conventions

Naming CSS is really hard

Naming CSS classes

Separation of Concerns:  CSS that depends on HTML.

• Naming your classes based on your content .author-bio treats your HTML as a dependency of your CSS.

• In this model, your HTML is restyleable, but your CSS is not reusable.

1/4

​ Mixing Concerns: HTML that depends on CSS.

• Naming your classes in a content-agnostic way after the repeating patterns in your UI

  .media-card treats your CSS as a dependency of your HTML.

• In this model, your CSS is reusable , but your HTML is not restyleable.

2/4

Naming CSS classes

.user-card__portrait {}

.nav ul li a img {}

.card

.btn, .btn--primary, .btn--secondary

.badge

.card-list, .card-list-item

.img--round

.modal-form, .modal-form-section

3/4

Naming CSS classes

4/4

Naming CSS classes

Naming Sass variables

BEM

<button class=“btn btn--secondary”>
  Purchase
</button>

.btn {
  display: inline-block;
  color: blue;
}

.btn--secondary {
  color: green;
}  

<button class=“btn--secondary”>
  Purchase
</button>

.btn--secondary {
  display: inline-block;
  color: green;
}

• Communicates purpose or function.
• Communicates component structure.
• Sets a consistent low-level specificity for styling selectors

Bloc | Element | Modifier

Advantages

Disadvantages

Low specificity

Dirty HTML

BEM

Bloc | Element | Modifier

• o-: object
• c-: component
• u-: utility class
• t-: theme
• s-: context or scope
• is-, has-: state (SMACSS)
• _: hack
• js-: JavaScript
• qa-: quality assurance

Namespaces

Dissecting CSS classes

.frnk-js-btn--primary {}

• .frnk-: brand prefix {}
• js-: JavaScript behavior {}
• .btn: class {}
• --primary: modifier {}

Architectures

Preprocessor agnostic

Why use an Architecture?

• Scalability

• Lack of documentation

• Lack of structure, quality assurance
• Lack of knowledge (about CSS or the project itself)
• Different styles, preferences, ways of working (linterns)
• Adding new styles to the end of stylesheets

OOCSS object oriented CSS

Good: reducing the amount of code by reusing it (DRY principle).

Bad: complex support.

When you change the style of a particular element, you will most likely have to change not only CSS (because most classes are common), but also add classes to the markup.

.nav {
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
  padding-top: 1em;
}

.foo {
  margin-left: .5em;
  margin-right: .5em;
  padding-bottom: 1.2em;
  padding-top: 1.2em;
}

.gmail {
  border-style: solid;
  border-color: red;
  border-width: 1px;
}

.nav {
  border-style: solid;
  border-color: red;
  border-width: 1px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
  padding-top: 1em;
}

.foo {
  border-style: solid;
  border-color: red;
  border-width: 1px;
  margin-left: .5em;
  margin-right: .5em;
  padding-bottom: 1.2em;
  padding-top: 1.2em;
}

Separate structure and skin

OOCSS object oriented CSS

h3 {
  color: red;
  font-family: 'Lato';
  font-size: 16px;
}

.text-bold {
  font-weight: 900;
}

.nav h3 {
  color: red;
  font-family: 'Lato';
  font-size: 16px;
  font-weight: 900;
}

.foo h3 {
  color: red;
  font-family: 'Lato';
  font-size: 16px;
}

Separate container and content

OOCSS object oriented CSS

SMACSS

Base: applies to HTML, no class/ID selectors.

Layout: big page sections.

.header, .sidebar, .footer

Module: encapsulation modules, re-usable.

State: overrides defaults.

.is-opened, .is-active

Theme

Scalable and Modular Architecture for CSS

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|   …
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …
|

1/2

7-1 pattern

|
|– layout/
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   …
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …
|
`– main.scss              # Main Sass file

2/2

7-1 pattern

ITCSS inverted triangle CSS

1/3

sass/
|
|– settings/
|   |– _config.scss # Project-level config
|   |– _core.scss # Core setup
|   |– _global.scss # Variables
|   …
|
|– tools/
|   |– _font-size.scss # Baseline mixin
|   |– _clearfix.scss # Clearfix mixin
|   |– _hidden.scss # Hidding mixin
|   …   
|
|– generic/
|   |– _box-sizing.scss # Default `box-sizing`
|   |– _normalize.scss # Normalize.css vendor
|   |– _reset.scss # A tiny reset
|   …  
|
|– elements/
|   |– _page.scss # Global `font-size` & `line-height`
|   |– _headings.scss # Default styles for headings 
|   |– _images.scss # Default images styles
|   …
|

ITCSS inverted triangle CSS

2/3

|
|– objects/
|   |– wrapper.scss # Page constraint object
|   |– layout.scss # Generic layout module
|   |– media.scss # Content side by side
|   …
|
|– components/
|   |– _buttons.scss # Default buttons styles
|   |– _nav.scss # Default nav styles
|   …
|
|– vendor/ (this folder is not mean to be used in ITCSS)
|   |– _bootstrap.scss # Bootstrap
|   …
|
|– utilities/
|   |– _widths.scss # Widths helper classes
|   |– _headings.scss # Headings helper classes
|   |– _spacings.scss # Spacings helpe classes
|   …
|
`_all.scss

ITCSS inverted triangle CSS

3/3

Tips & Tricks

Principles

Software Design Principles

Recommendations

Reduce, Reuse & Recycle

/// Make a context based selector a little more friendly
/// @author Hugo Giraudel
/// @param {String} $context
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}

CSS order

Comments

.frnk-js-btn--primary,
.frnk-js-btn--secondary,
.frnk-js-btn--tertiary {
    font-family: 'Lato';
}

CSS order

Declarations

.body-text {
  border-color: red;
  border-style: solid;
  border-width: 1px;
  padding-left: 20px;
  padding-right: 20px;
  z-index: 666;
}

CSS order

By type

Alphabetically

// Buttons can be applied to any HTML element that is used to trigger a user
// action (e.g. following a call to action link, submitting a form).
//
// 1. Line differently sized buttons up a little nicer.
.btn,
.link {
    // Avoid @extends: creates unnecesary CSS
    @extend .text; 
    @include fluid-font();
    color: red;
    vertical-align: middle; /* [1] */

    @media (min-width: 64em) {
        color: pink;
    }

    &--secondary {
        width: 100%;
    }

    .nav & {
        margin-left: auto;
    }

    &.is-disable {
        opacity: .5;
    }
}

CSS order

Architecture smells

Resources

Codemotion 2017

Thanks

Any Question?