Thoughtful architecture and good practices in CSS - myth or new realities

THOUGHTFUL ARCHITECTURE AND GOOD
PRACTICES IN CSS
MYTH OR NEW REALITIES?

Hello world!
Senior Frontend Developer @ Boldare
● SCRUM and Agile programming enthusiast
● antiquity and space admirer
● Canada addict
Thoughtful architecture and good practices in CSS - myth or new realities? Anna Matysiak

Some Theory of CSS
W3C:
“CSS is the language for describing the presentation of Web
pages, including colors, layout, and fonts. It allows one to
adapt the presentation to different types of devices, such as
large screens, small screens, or printers. CSS is independent
of HTML and can be used with any XML-based markup
language. (...) This is referred to as the separation of
structure (or: content) from presentation.”
CSS

Myth or reality?
Cambridge Dictionary:
● “an ancient story or set of stories, especially explaining
the early history of a group of people or about natural
events and facts”
● “a commonly believed but false idea”
MYTH

Myth or reality?
● “an ancient story or set of stories, especially explaining
the early history of a group of people or about natural
events and facts”
● “a commonly believed but false idea”
MYTH
Example: It is impossible to only talk about CSS
for 45 minutes ;)

Myth: CSS is always easy and simple
CSS
IS
AWESOME

Myth: It is impossible to write modular and scalable CSS code
What can we do?

Reality: methodologies
METHODOLOGIES
“a system of ways of doing, teaching,
or studying something”

OOCSS
METHODOLOGIES

METHODOLOGIES
SM
ACSS
OOCSS

METHODOLOGIES
BEM
OOCSS
SM
ACSS

METHODOLOGIES
ACSS
OOCSS
BEM
SM
ACSS

METHODOLOGIES
ITCSS
OOCSS
BEM
ACSS
SM
ACSS

METHODOLOGIES
CUBE CSS OOCSS
BEM
ACSS
ITCSS
SM
ACSS

Reality: Objective Oriented CSS
OOCSS
● modular and object-oriented CSS
● first, global classes, then more
specialized ones
● separated styles for containers
and content

Reality: Scalable and Modular Architecture for CSS
SMACSS
● styles are divided into 5 groups:
- basic
- layout (l- prefix)
- modules
- state (is- prefix)
- subject

Reality: BEM
BEM
● modular CSS code
● elements are divided into:
- blocks (e.g. form)
- elements (e.g. input)
- modifiers (e.g. password input)

Reality: Atomic CSS
ACSS
● content-independent and reusable
CSS classes
● most often single-line,
responsible for only one setting

Reality: Inverted Triangle CSS
ITCSS
● CSS code is separated into several
sections (layers)
● it uses 3 principles:
- generic to explicit
- low to high specificity
- far-reaching to localized
https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528

WAIT…
WHY NOT USE SOMETHING
THAT WE ALREADY KNOW?

DRY
Don’t Repeat Yourself

YAGNI
You Ain’t Gonna Need It

KISS
Keep It Simple, Silly

SCA
Separation of concerns

SOLID Wikipedia:
“In object-oriented programming, SOLID is a mnemonic
acronym for five design principles intended to make software
designs more understable, flexible and maintainable.
The principles are a subset of many principles promoted by
American software engineer and instructor Robert C. Martin,
first introduced in his 2000 paper Design Principles
and Design Patterns”

SOLID
SOLID is an acronym for the first five OOD principles:
D
I
ependency Inversion Principle
nterface Segregation Principle
L iskov Substitution Principle
O pen closed Principle
S ingle responsibility Principle

SOLID
Robert C. Martin “Uncle Bob”
American software engineer, instructor,
author of many books on software engineering,
founder of the Agile Manifesto

Myth: It is impossible to use Single Responsibility Principle in CSS
SOLID SRP
a class should only have one responsibility

Myth: It is impossible to use Open Closed Principle in CSS
SOLID OCP
a class should be open to extensions
and closed to modifications

Myth/True: It is impossible to use Liskov Substitution Principle in CSS
SOLID LSP
a class that extends to another class
should not change the behavior
of the base class

Myth/True: It is impossible to use Interface Segregation Principle in CSS
SOLID ISP
many dedicated classes are better
than one very general one

Myth/True: It is impossible to use Dependency Inversion Principle in CSS
SOLID DIP
changing the styles of the child classes
should not affect the styles
of the parent classes

Reality: CSS preprocessors
PREPROCESSORS

NESTING

INHERITANCE

MIXINS

LOOPS

Reality: CSS frameworks
FRAMEWORKS

Reality: CSS frameworks
FRAMEWORKS
https://stateofcss.com

Reality: CSS Styleguides

CSS Testing
Emulators

CSS Testing
Syntax

CSS Testing
Regression

Reality: design system
DESIGN SYSTEM
“At FOWA 2013 in London, Mark Otto described a design system as
“everything that makes up your product”
Everything? Everything. From typography, layouts and grids, colors, icons,
components and coding conventions, to voice and tone, style-guide and
documentation, a design system is bringing all of these together in a way
that allows your entire team to learn, build, and grow.”
https://css-tricks.com/design-systems-building-future/

Reality: design system
DESIGN SYSTEM

Is CSS a programming language?

DECLARATIVE / IMPERATIVE programming language?

DECLARATIVE IMPERATIVE
describes a detailed sequence of steps that
leads to a solution (how to do it)
- a sequence of commands to be
executed by the computer
- requesting some action to be performed
- the result of the operation is stored for
later operations
- performing more complex expressions
consisting of arithmetic operations
and entire functions
JavaScript, PHP

DECLARATIVE IMPERATIVE
describes the conditions that the final solution
must meet (what we want to achieve)
describes a detailed sequence of steps that
lead to solution (how to do it)
- independence
(the end result doesn’t depend on any
external condition)
- statelessness
(it has no internal state that is preserved
between calls)
- determinism
(always gives the same result for the
same input arguments)
- a sequence of commands to be
executed by the computer
- requesting some action to be performed
- the result of the operation is stored for
later operations
- performing more complex expressions
consisting of arithmetic operations
and entire functions
CSS, HTML JavaScript, PHP

DESCRIPTIVE PROGRAMMABLE
- it only describes the data structures
and the expected result
- is most often not Turing complete or it
achieves completeness in some other
way
- its declarative model of computation is
Turing complete
CSS, HTML, SQL Prolog

BUT...

CSS is gaining imperative features

FUNCTIONS

FUNCTIONS
OPERATORS

FUNCTIONS
OPERATORS
MATH VARIABLES

TURING MACHINE programming language?

CSS
Douglas Crockford
JavaScript guru,
American computer programmer and entrepreneur,
writer and speaker on JavaScript

Wikipedia:
“In computability theory, a system of data-manipulation rules (such as a computer's instruction set, a programming
language, or a cellular automaton) is said to be Turing-complete or computationally universal if it can be used to
simulate any Turing machine. This means that this system is able to recognize or decide other data-manipulation rule
sets. Turing completeness is used as a way to express the power of such a data-manipulation rule set. (...)
To show that something is Turing-complete, it is enough to show that it can be used to simulate some Turing-complete
system. For example, an imperative language is Turing-complete if it has conditional branching (e.g., "if" and "goto"
statements, or a "branch if zero" instruction; see one-instruction set computer) and the ability to change an arbitrary
amount of memory (e.g., the ability to maintain an arbitrary number of data items). Of course, no physical system can
have infinite memory; but if the limitation of finite memory is ignored, most programming languages are otherwise
Turing-complete.

Rule 110 cellular automaton
Wikipedia:
In an elementary cellular automaton, a one-dimensional pattern of 0s and 1s evolves according to a simple set of rules. Whether a point in the
pattern will be 0 or 1 in the new generation depends on its current value, as well as on those of its two neighbors.
Set of rules:
Current pattern 111 110 101 100 011 010 001 000
New state for center cell 0 1 1 0 1 1 1 0

https://jsfiddle.net/Camilo/eQyBa/
Rule 110 cellular automaton

CSS is NOT Turing complete

CSS + HTML is Turing complete

CSS + HTML + USER INTERACTION is Turing complete

DOMAIN - SPECIFIC / GENERAL - PURPOSE programming language?

DOMAIN - SPECIFIC GENERAL - PURPOSE
a programming language that is widely used
across all application domains and has no
special functionality for a particular domain
JavaScript, PHP

DOMAIN - SPECIFIC GENERAL - PURPOSE
a programming language adapted to solve a
specific problem area, a specific
representation of a problem or a specific
technique for solving them
a programming language that is widely used
across all application domains and has no
special functionality for a particular domain
HTML, CSS JavaScript, PHP

CONTEXTUAL programming language?

Wikipedia:
“In computer science, a task context
is the minimal set of data used by a
task (which may be a process, thread,
or fiber) that must be saved to allow a
task to be interrupted, and later
continued from the same point.

COMPLEX programming language?

FLEXIBILITY
DEMANDING
DISCIPLINE
BROWSER
COMPATIBILITY
RESILIENCE

FLEXIBILITY
DEMANDING
DISCIPLINE
RESILIENCE

EASY TO LEARN language?

Reality: low entry threshold for CSS

Reality: CSS roadmap 2021
Preprocessors
Frameworks
Methodologies
Styled
Component
CSS Module
CSS-in-JS

Reality: CSS can be complicated
https://codepen.io/ivorjetski/details/xMJoYO

Reality: CSS can be complicated
https://codepen.io/_fbrz/pen/whxbF

LOWER EFFORT language?

Adam Argyle
Chrome CSS Developer Advocate at Google,
UI + UX Specialized Full Stack Web App Engineer

TO SUM IT UP...

CSS is a WORTHY language!

Chris Coyier
web designer and developer,
CSS-TRICKS creator,
CodePen co-founder,
writer and speaker

CSS
Lea Verou
software developer, speaker and author,
Invited Expert in the W3C CSS Working Group,
W3C Technical Architecture Group (TAG) member

We are all developers :)

Thank you!
CONTACT ME
amatysiak88@gmail.com
https://www.linkedin.com/in/matysiakanna/
ARE YOU BOLD ENOUGH?
Visit boldare.com/career

Thoughtful architecture and good practices in CSS - myth or new realities

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Thoughtful architecture and good practices in CSS - myth or new realities

Semelhante a Thoughtful architecture and good practices in CSS - myth or new realities (20)

Último

Último (20)

Thoughtful architecture and good practices in CSS - myth or new realities