2019. CSS. Is it simple? Is it hard? To BEM or not to BEM? CSS-in-JS? Sass or LESS? Bootstrap or Foundation? CSS Modules or styled-components? How should we write CSS today? Which is the quickest way? And the more confortable? CSS is often considered as a non-problem until the moment it brings out its best and it messes up our last friday before the holidays. Let's try to clarify about different ways to write our lovely stylesheets and figure out which is the best one that fits our needs.

2. Today's goalToday's goal
To create a path to follow toTo create a path to follow to
support our decisionalsupport our decisional
processprocess

3. Starting a newStarting a new
projectproject

4. 1. Evaluate1. Evaluate
environmentenvironment
conditionsconditions

5. Team expertiseTeam expertise
Knowledge and seniorityKnowledge and seniority
1. Evaluate environment conditions

6. Project typeProject type
Website, app, white labelWebsite, app, white label
1. Evaluate environment conditions

7. Project lifeProject life
spanspan
Days, months or yearsDays, months or years
1. Evaluate environment conditions

8. DesignDesign
Admin panel or Landing pageAdmin panel or Landing page
1. Evaluate environment conditions

9. BrowserBrowser
compatibilitycompatibility
1. Evaluate environment conditions

10. Build processBuild process
Do you have/want/need one?Do you have/want/need one?
1. Evaluate environment conditions

11. JS frameworkJS framework
React, Angular, Vue, Vanilla...React, Angular, Vue, Vanilla...
1. Evaluate environment conditions

12. Micro frontendsMicro frontends
approachapproach
1. Evaluate environment conditions

13. RecapRecap
Team expertise
Project type and life span
Design
Browser compatibility
Build process
JS framework or Micro frontends
1. Evaluate environment conditions

14. 2. Define a tech2. Define a tech
stackstack

15. CSS frameworkCSS framework
2. Define a tech stack

16. Why? What do you need? A button?
Who will maintain the styles?
Initial speed VS customization
Debt on long running projects
CSS frameworks

17. CSS only [Bulma, PureCSS]
Utility first [Tachyons, Tailwind]
JS support [Bootstrap, Foundation]
CSS frameworks: Which one?

18. PostPost
processingprocessing
2. Define a tech stack

19. CSS → CSSCSS → CSS
Post processing

20. Use casesUse cases
Vendor prefixes, minification,Vendor prefixes, minification,
transpilation, lintingtranspilation, linting
Post processing

21. PostCSSPostCSS
De facto standardDe facto standard
Post processing

22. Pre processingPre processing
2. Define a tech stack

23. !CSS → CSS!CSS → CSS
Pre processing

24. CSS onCSS on
steroidssteroids
Pre processing

25. Great powerGreat power
Variables, nesting, extends,Variables, nesting, extends,
mixins, operatorsmixins, operators
Pre processing

27. But...But...
CSS is filling the gapCSS is filling the gap
Pre processing

28. Main optionsMain options
Pre processing

29. Sass / SCSSSass / SCSS
Great diffusion, powerful,Great diffusion, powerful,
imperativeimperative
Pre processing

30. LessLess
Nice community, run in theNice community, run in the
browser, declarativebrowser, declarative
Pre processing

31. Sass VS LessSass VS Less
Imperative VS declarativeImperative VS declarative
Pre processing

32. SCSSSCSS

33. LessLess

34. SCSSSCSS

35. LessLess

36. StylusStylus
Flexible syntax, some uniqueFlexible syntax, some unique
features, javascriptfeatures, javascript
Pre processing

37. PostCSSPostCSS
Modular, heavilyModular, heavily
customizablecustomizable
Pre processing

38. CSS-in-JSCSS-in-JS
Framework agnostic or not?Framework agnostic or not?
UI binded to the StateUI binded to the State
2. Define a tech stack

39. 3. Styleguides3. Styleguides

40. NamingNaming
conventionconvention
3. Styleguides

41. AtomicAtomic
UtilitiesUtilities
Naming convention

43. BEMBEM
Block Element ModifierBlock Element Modifier
Naming convention

45. SemanticSemantic
MaintainableCSSMaintainableCSS
Naming convention

47. Enforce withEnforce with
linterslinters
3. Styleguides

48. Embrace orEmbrace or
escape theescape the
cascade?cascade?
3. Styleguides

50. It express theIt express the
WHYWHY
The cascade

51. What VS WhyWhat VS Why

52. Strongly bindedStrongly binded
to the designto the design
The cascade

53. Update existingUpdate existing
codebasecodebase
3. Styleguides

54. ProgressiveProgressive
enhancementenhancement
Existing codebase

56. RecapRecap

57. Use a framework to go fasterUse a framework to go faster
in building admin sites orin building admin sites or
short termshort term projects with lowprojects with low
customizationcustomization
Recap

58. Use a pre-processor to writeUse a pre-processor to write
fasterfaster
Recap

59. Post-process forPost-process for
compatibility andcompatibility and
performanceperformance
Recap

60. Standard CSS with semanticStandard CSS with semantic
classnames is the bestclassnames is the best
strategy for longstrategy for long lastinglasting
project and white labelproject and white label
productsproducts
Recap

61. Enforce the style with aEnforce the style with a
styleguidestyleguide
Recap

62. CSS is global because the UICSS is global because the UI
needs coherence, but it isneeds coherence, but it is
really hardreally hard to handle wellto handle well
Recap

63. GiacomoGiacomo
ZinettiZinetti
@gcmznt@gcmznt

64. ReferencesReferences
BEM
MaintainableCSS
Quella sporca dozzina a cascata - Davide Di
Pumpo