Effective styling on Web and best practices

A presentation at DevX conf in June 2020 in Trinec, Czechia by Ondřej Konečný

Slide 1

Effective styling on Web and best practices

Slide 2

History 2) What was before CSS? 3) CSS arrival 4) CSS complications 5) Methodologies and architectures 6) What about styling with JavaScript?

Slide 3

How to create web design effectively Problem Specific solution

Slide 4

Dr. Håkon Wium Lie

Slide 5

E-mail communication http://1997.webhistory.org/www.lists/www-talk.1994q1/0648.html

Slide 6

Slide 7

What was before CSS came along?

Slide 8

ViolaWWW

Slide 9

Space Jam

Slide 10

Space Jam Colors Layout

Slide 11

Space Jam - colors

Slide 12

Space Jam – colors in code

<body bgcolor=”#000000” text=”#ff0000” link=”#ff4c4c” vlink=”#ff4c4c” alink=”#ff4c4c”>

Slide 13

Space Jam – layout

Slide 14

Space Jam – layout <table width=500 border=0> <tr> <td colspan=5 align=right valign=top> </td> </tr> <tr> <td colspan=2 align=right valign=middle> <br> <br> <br> <a href=”cmp/pressbox/pressboxframes.html”><img src=”img/p-pressbox.gif” height=56 width=131 alt=”Press Box Shuttle” border=0></a> </td> … </tr> … </table>

Slide 15

CSS came up with another layout solution Float-based layout Flexbox-based layout Grid layout

Slide 16

Float-base layout

Slide 17

Flexbox base layout

Slide 18

Grid layout

Slide 19

Grid layout

Slide 20

CSS and related problems

Slide 21

CSS and related problems Revolution

Slide 22

Eric A. Meyer

Slide 23

CSS: The Definitive Guide

Slide 24

First CSS <STYLE type=”text/css”> BODY { font-family: serif; background-color: silver; } H1 { font: x-large Verdana, sans-serif; color: olive; border-bottom: thin black solid; } TABLE { margin: 0; } .sidebar { background-color: olive; padding: 0.5em; } .sidebar UL LI { list-style-type: none; margin-left: 0; margin-right: 0.5em; } .sidebar UL LI A { color: #ffcccc; } .body { background: white no-repeat center url(http://www.mysite.org/pix/logo.gif); } </STYLE>

Slide 25

One change will affect multiple places Homepage paragraph p{ padding-bottom: 10px; color: blue; } Category paragraph Product detail paragraph

Slide 26

Problems with large projects Complexity Complications

Slide 27

Slide 28

Complications with sustainability Straightforwardness of language Sustainability

Slide 29

Slide 30

The most common mistakes

Slide 31

Deep selectors and high specificity Graphic Implementation

Slide 32

Slide 33

Slide 34

It doesn’t work

Slide 35

Slide 36

What are the modification options now? Increase specificity Edit blocking selector !important

Slide 37

The only suitable option to solve the problem

Slide 38

What have we achieved? New selector that can no longer be used

Slide 39

Nesting hell preprocessors and capability

Slide 40

Slide 41

What will the compiled file look like?

Slide 42

Slide 43

How should we nest selectors?

Slide 44

Cascade - order of writing rules and file structure Order matters

Slide 45

Example:

Slide 46

Slide 47

Slide 48

Slide 49

CSS methodologies and architectures

Slide 50

In 2008, year of first experiments OOCSS SMACSS SUITCSS BEM ITCSS CUBE CSS

Slide 51

Making sense of methodologies and architectures Sustainability Extensibility CSS problems

Slide 52

OOCSS OOCSS defines an object as a visual pattern that is reusable across applications

Slide 53

Separation of appearance from structure Content and container separation

Slide 54

Separation of appearance from structure

Slide 55

Content and container separation

Slide 56

SMACSS The main idea of SMACSS is to categorize the CSS rule system

Slide 57

Base

Slide 58

Layout

Slide 59

Module

Slide 60

State

Slide 61

BEM

Slide 62

The biggest advantages Creates selectors of the lowest specificity Uniformity for larger development teams

Slide 63

Slide 64

Cons? The need to name all elements

Slide 65

ITCSS

Slide 66

What ITCSS solve? File organization Problems with specificity

Slide 67

Settings

Slide 68

Tools

Slide 69

Generic

Slide 70

Elements

Slide 71

Objects

Slide 72

Components

Slide 73

Utilities

Slide 74

What about JavaScript and styling?

Slide 75

CSS Modules Styled components

Slide 76

Older than CSS

Slide 77

What is CSS-in-JS trying to solve? Global scope Write everything in JavaScript

Slide 78

CSS Modules classic CSS Don’t think about class names

Slide 79

Cons? Dependence on JavaScript

Slide 80

Styled Components classic CSS