Why shouldn't you do Frontend?

@mathieuspil

Sorry

I am the biggest security hole in the company

The goal:

Have a discussion on how to improve quality by saying no sometimes.

!new-projects

Display: none;

A client asks if you can up the limit of slideshow items from 5 to 50.

<ul class="slider">
    <li class="slider__item slider__item--active"><img src="image1.png" /></li>
    <li class="slider__item"><img src="image2.png" /></li>
    <li class="slider__item"><img src="image3.png" /></li>
    <li class="slider__item"><img src="image4.png" /></li>
    <li class="slider__item"><img src="image5.png" /></li>
</ul>

.slider__item {
    display: none;
}

.slider__item--active {
    display: block;
}

<ul class="slider">
    <li class="slider__item slider__item--active"><div style="background: url(image1.png);"></div></li>
    <li class="slider__item"><div style="background: url(image2.png);"></div></li>
    <li class="slider__item"><div style="background: url(image3.png);"></div></li>
    <li class="slider__item"><div style="background: url(image4.png);"></div></li>
    <li class="slider__item"><div style="background: url(image5.png);"></div></li>
</ul>

.slider__item {
    display: none;
}

.slider__item--active {
    display: block;
}

What can we take from this?

Sometimes it's not clear if a task is backend or frontend.

Tasks like this shouldn't be done alone.

class-based styling !== writing css-selectors

A client asks if the news-items on the frontpage can be filtered differently for logged-in users only.

Here is how it goes

1) Duplicate the view

2) Make sure the old view is anonymous users only

3) Make sure the new view is logged-in users only

4) See the new view, and find out the styling is broken.

5) You don't want to ask a frontend-person to fix this, because it is probably just a missing selector.

.view-display-id-panel_pane_1 {
    background: green;
    font-size: 1.2em;
    .view-header {
        margin-bottom: 1rem;
    }
    .news-item {
        h3, h4 {
            color: red;
            display: inline-block;
            background: green;
        }
    }
}

.SCSS

.view-display-id-panel_pane_1 {
    background: green;
    font-size: 1.2em;
}
.view-display-id-panel_pane_1 .view-header {
    margin-bottom: 1rem;
}
.view-display-id-panel_pane_1 .news-item h3,
.view-display-id-panel_pane_1 .news-item h4 {
    color: red;
    display: inline-block;
    background: green;
}

.css

.view-display-id-panel_pane_1,
.view-display-id-panel_pane_2 { // <= ADDED
    background: green;
    font-size: 1.2em;
    .view-header {
        margin-bottom: 1rem;
    }
    .news-item {
        h3, h4 {
            color: red;
            display: inline-block;
            background: green;
        }
    }
}

.SCSS

.view-display-id-panel_pane_1,
.view-display-id-panel_pane_2 {
    background: green;
    font-size: 1.2em;
}
.view-display-id-panel_pane_1 .view-header,
.view-display-id-panel_pane_2 .view-header {
    margin-bottom: 1rem;
}
.view-display-id-panel_pane_1 .news-item h3,
.view-display-id-panel_pane_1 .news-item h4,
.view-display-id-panel_pane_2 .news-item h3,
.view-display-id-panel_pane_2 .news-item h4 {
    color: red;
    display: inline-block;
    background: green;
}

.css

.view-news {
    background: green;
    font-size: 1.2em;
    .view-header {
        margin-bottom: 1rem;
    }
    .news-item {
        h3, h4 {
            color: red;
            display: inline-block;
            background: green;
        }
    }
}

.SCSS

Whats the point?

.view-news {
    background: green;
    font-size: 1.2em;
    .view-header {
        ...
    }
    .news-item {
        ...
    }
}
.view-news--red {
    background: red;
}
.view-news--smaller-font {
    font-size: 0.8rem;
}

<div class="view-news">...</div>
<div class="view-news view-news--smaller-font">...</div>
<div class="view-news view-news--red">...</div>
<div class="view-news view-news--red view-news--smaller-font">...</div>

If you keep every variation of an element in a separate class, the possibilities of combinations expand exponentially, instead of expanding your css.

If you are interested

https://css-tricks.com/bem-101/

What can we take from this?

Grey zone of stuff that can be done by both

We have to stay billable.

BEM + CSS-specificity

A client asks why the contact submit-button suddenly has a green background, and wants it blue again.

You open up the inspector and this comes out:

<a href="#" class="button button--submit">Submit</a>

Bad solutions

a.button {
    background: green;
}

.button--submit {
    background: blue !important;
}

Bad solutions

a.button {
    background: green;
}

a.button--submit {
    background: blue;
}

Bad solutions

a.button {
    background: green;
}

.button.button--submit {
    background: blue;
}

Bad solutions

a.button {
    background: green;
}

#edit-submit {
    background: blue;
}

Good solutions

.button {
    background: green;
}

.button--submit {
    background: blue;
}

What can we take from this?

Break down the barrier of asking for silly stuff.

Cross-country resources?

SMACSS & Atomic design

A client asks to make the search-block in the footer only 25% of the width of the full page.

Most common solution:

.region-footer .search-block {
    width: 50%;
}

Atomic design

We’re not designing pages, we’re designing systems of components.

Styling stuff based on the region it is in, has become a bad practise

.search-block--tiny {
    width: 25%;
}

http://bradfrost.com/blog/post/atomic-web-design/

But in what css-file do I write this in?

Drupal-SMACSS

Base — CSS reset/normalize plus HTML element styling.
Layout — macro arrangement of a web page, including any grid systems.
Component — discrete, reusable UI elements.
State — styles that deal with client-side changes to components.
Theme — purely visual styling (“look-and-feel”) for a component.

ul {
  list-style-type: disc;
  list-style-image: none;
  margin: 0.25em 0 0.25em 1.5em;
}
ol {
  list-style-type: decimal;
  margin: 0.25em 0 0.25em 2em;
  padding: 0;
}

Base

.layout-container {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

Layout

.button {
  ...
}
.button:hover {
  ...
}
.button:focus {
  ...
}
.button:active {
  ...
}

Component & state

.maintenance-page {
  background-color: #e0e0d8;
  background-repeat: repeat;
  background-position: left top, 50% 50%; /* LTR */
  min-height: 100%;
}

Theme

.search-block {
    width: 50%;
}

.search-block--tiny {
    width: 25%;
}

What can we take from this?

it's not rocketscience, go ahead and try it.

But let review happen on stuff you aren't 100% sure about.

False assumptions

when changing something in the backend, the frontend shall break.

<article class="speaker speaker--teaser">
    <a class="speaker__link" href="#" rel="bookmark">
        <div class="speaker__photo">...</div>

        <h4 class="speaker__title">Mister X</h4>

        <div class="speaker__function">...</div>
      </div>
    </a>
</article>

It's impossible to know on which class to style on drupal

<article class="speaker speaker--teaser">
    <a class="speaker__link" href="#" rel="bookmark">
        <div class="speaker__image">...</div>

        <h4 class="speaker__title">Mister X</h4>

        <div class="speaker__function">...</div>
      </div>
    </a>
</article>

.speaker__image {
    width: 100%;
    border-radius: 50%;
}    

.speaker--teaser .speaker__image {
    float: left
    width: 50px;
}

No one has enough confidence to bluntly rewrite css not written by himself.

Scope support

After a couple of years of maintaining a theme, over time it becomes harder and harder to maintain

#content-top .content-size-small .field-ns-prod-entrpr-media, #content-top .panels-ipe-portlet-content > .box-small, #content-top .view-filters .views-exposed-widgets .panels-ipe-portlet-content > .views-exposed-widget, .view-filters .views-exposed-widgets #content-top .panels-ipe-portlet-content > .views-exposed-widget, #content-top > .box-small, .view-filters .views-exposed-widgets #content-top > .views-exposed-widget, #content-top .box-small, #content-top .view-filters .views-exposed-widgets .views-exposed-widget, .view-filters .views-exposed-widgets #content-top .views-exposed-widget, #content-bottom .content-size-small .field-ns-prod-entrpr-media, #content-bottom .panels-ipe-portlet-content > .box-small, #content-bottom .view-filters .views-exposed-widgets .panels-ipe-portlet-content > .views-exposed-widget, .view-filters .views-exposed-widgets #content-bottom .panels-ipe-portlet-content > .views-exposed-widget, #content-bottom > .box-small, .view-filters .views-exposed-widgets #content-bottom > .views-exposed-widget, #content-bottom .box-small, #content-bottom .view-filters .views-exposed-widgets .views-exposed-widget, .view-filters .views-exposed-widgets #content-bottom .views-exposed-widget, #content .content-size-small .field-ns-prod-entrpr-media, #content .panels-ipe-portlet-content > .box-small, #content .view-filters .views-exposed-widgets .panels-ipe-portlet-content > .views-exposed-widget, .view-filters .views-exposed-widgets #content .panels-ipe-portlet-content > .views-exposed-widget, #content > .box-small, .view-filters .views-exposed-widgets #content > .views-exposed-widget, #content .box-small, #content .view-filters .views-exposed-widgets .views-exposed-widget, .view-filters .views-exposed-widgets #content .views-exposed-widget

But we live in a drupal-world!

Everything is there in D8, let's not ignore it.

Questions?

@MathieuSpil