Effective styling on Web and best practices

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

How to create web design effectively Problem Specific solution

Dr. Håkon Wium Lie

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

What was before CSS came along?

ViolaWWW

Space Jam

Space Jam Colors Layout

Space Jam - colors

Space Jam – colors in code

Space Jam – layout

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>

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

Float-base layout

Flexbox base layout

Grid layout

CSS and related problems

CSS and related problems Revolution

Eric A. Meyer

CSS: The Definitive Guide

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>

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

Problems with large projects Complexity Complications

Complications with sustainability Straightforwardness of language Sustainability

The most common mistakes

Deep selectors and high specificity Graphic Implementation

It doesn’t work

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

The only suitable option to solve the problem

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

Nesting hell preprocessors and capability

What will the compiled file look like?

How should we nest selectors?

Cascade - order of writing rules and file structure Order matters

Example:

CSS methodologies and architectures

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

Making sense of methodologies and architectures Sustainability Extensibility CSS problems

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

Separation of appearance from structure Content and container separation

Separation of appearance from structure

Content and container separation

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

Base

Layout

Module

State

BEM

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

Cons? The need to name all elements

ITCSS

What ITCSS solve? File organization Problems with specificity

Settings

Tools

Generic

Elements

Objects

Components

Utilities

What about JavaScript and styling?

CSS Modules Styled components

Older than CSS

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

CSS Modules classic CSS Don’t think about class names

Cons? Dependence on JavaScript

Styled Components classic CSS