Today's goal
To create a path to follow to support our decisional process
Starting a new project
1. Evaluate environment conditions
1. Evaluate environment conditions
Team expertise
Knowledge and seniority
1. Evaluate environment conditions
Project type
Website, app, white label
1. Evaluate environment conditions
Project life span
Days, months or years
1. Evaluate environment conditions
Design
Admin panel or Landing page
1. Evaluate environment conditions
Browser compatibility
1. Evaluate environment conditions
Build process
Do you have/want/need one?
1. Evaluate environment conditions
JS framework
React, Angular, Vue, Vanilla...
1. Evaluate environment conditions
Micro frontends approach
1. Evaluate environment conditions
Recap
- Team expertise
- Project type and life span
- Design
- Browser compatibility
- Build process
- JS framework or Micro frontends
2. Define a tech stack
2. Define a tech stack
CSS framework
CSS frameworks
- Why? What do you need? A button?
- Who will maintain the styles?
- Initial speed VS customization
- Debt on long running projects
CSS frameworks: Which one?
- CSS only [Bulma, PureCSS]
- Utility first [Tachyons, Tailwind]
- JS support [Bootstrap, Foundation]
2. Define a tech stack
Post processing
Post processing
CSS → CSS
Post processing
Use cases
Vendor prefixes, minification, transpilation, linting
Post processing
PostCSS
De facto standard
2. Define a tech stack
Pre processing
Pre processing
!CSS → CSS
Pre processing
CSS on steroids
Pre processing
Great power
Variables, nesting, extends, mixins, operators
Pre processing
But...
CSS is filling the gap
Pre processing
Main options
Pre processing
Sass / SCSS
Great diffusion, powerful, imperative
Pre processing
Less
Nice community, run in the browser, declarative
Pre processing
Sass VS Less
Imperative VS declarative
SCSS
Less
SCSS
Less
Pre processing
Stylus
Flexible syntax, some unique features, javascript
Pre processing
PostCSS
Modular, heavily customizable
2. Define a tech stack
CSS-in-JS
Framework agnostic or not?
UI binded to the State
3. Styleguides
3. Styleguides
Naming convention
Naming convention
Atomic
Utilities
Naming convention
BEM
Block Element Modifier
Naming convention
Semantic
MaintainableCSS
3. Styleguides
Enforce with linters
3. Styleguides
Embrace or escape the cascade?
The cascade
It express the WHY
What VS Why
The cascade
Strongly binded to the design
3. Styleguides
Update existing codebase
Existing codebase
Progressive enhancement
Recap
Recap
Use a framework to go faster in building admin sites or short term projects with low customization
Recap
Use a pre-processor to write faster
Recap
Post-process for compatibility and performance
Recap
Standard CSS with semantic classnames is the best strategy for long lasting project and white label products
Recap
Enforce the style with a styleguide
Recap