SlideShare a Scribd company logo
1 of 12
Hello!I am Jo Franchetti
I love CSS
You can find me at @thisisjofrank
CSS in JS for
CSS lovers
1.
We build things for the web
HTML + CSS and we’re good to go, right?
2.
LESS and SASS
CSS as a programming language?!
3.
BEM and SMACSS
Ooh, so scalable, much modules
“<form class="form form--theme-xmas">
<input class="form__input" type="text">
<input class="form__submit form__submit--disabled"
type="submit">
</form>
.form { … }
.form--theme-xmas { … }
.form__input { … }
.form__submit { … }
.form__submit--disabled { … }
BEM with SMACSS
◍Block__Element__Modifier
◍“Namespaced”
◍Modular
Control over sensible naming and sizing is
still in the hands of the developer
4.
React + CSS Modules
Components and modules
“
Import React from 'react';
import styles from './header.css';
…
class Header extends React.Component {
render() {
return (
<h1 className={styles.title}>
An example heading
</h1>
);
}
}
.title { ... } .header__title { ... }
styled-components
“<p class="intro">Hello World!</p>
.intro {
font-size: 1.5em;
color: rebeccapurple;
}
“import styled from 'styled-components';
const Intro = styled.p`
font-size: 1.5em;
color: rebeccapurple;
`;
<Intro>Hello World</Intro>

More Related Content

What's hot

Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozókMáté Farkas
 
Spencer Nash - Advanced Custom Fields
Spencer Nash - Advanced Custom FieldsSpencer Nash - Advanced Custom Fields
Spencer Nash - Advanced Custom Fieldsdominicj
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tipsChris Love
 
How to Tutorial: Hosted Wordpress
How to Tutorial: Hosted WordpressHow to Tutorial: Hosted Wordpress
How to Tutorial: Hosted WordpressChuck Cabugoy
 

What's hot (11)

Raw plugin demonstration
Raw plugin demonstrationRaw plugin demonstration
Raw plugin demonstration
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
CSS előfeldolgozók
CSS előfeldolgozókCSS előfeldolgozók
CSS előfeldolgozók
 
Unit 3 (frames)
Unit 3 (frames)Unit 3 (frames)
Unit 3 (frames)
 
Spencer Nash - Advanced Custom Fields
Spencer Nash - Advanced Custom FieldsSpencer Nash - Advanced Custom Fields
Spencer Nash - Advanced Custom Fields
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Ashish
AshishAshish
Ashish
 
How to Tutorial: Hosted Wordpress
How to Tutorial: Hosted WordpressHow to Tutorial: Hosted Wordpress
How to Tutorial: Hosted Wordpress
 

Similar to CSS in JS for CSS lovers

SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer
 
Not just a pretty (type)face
Not just a pretty (type)faceNot just a pretty (type)face
Not just a pretty (type)faceClare Evans
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014vzaccaria
 
Getting SASSy with front end development
Getting SASSy with front end developmentGetting SASSy with front end development
Getting SASSy with front end developmentMatthew Carleton
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
Front-End Methodologies
Front-End MethodologiesFront-End Methodologies
Front-End MethodologiesArash Manteghi
 
Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan Stefan Bauer
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS ArchitectureJohn Need
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookFuture Insights
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for cssMohamed Amin
 
Create SASSy web parts in SPFx
Create SASSy web parts in SPFxCreate SASSy web parts in SPFx
Create SASSy web parts in SPFxStefan Bauer
 

Similar to CSS in JS for CSS lovers (20)

HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
 
Css
CssCss
Css
 
Not just a pretty (type)face
Not just a pretty (type)faceNot just a pretty (type)face
Not just a pretty (type)face
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
 
Getting SASSy with front end development
Getting SASSy with front end developmentGetting SASSy with front end development
Getting SASSy with front end development
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
Front-End Methodologies
Front-End MethodologiesFront-End Methodologies
Front-End Methodologies
 
Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan Create SASSY Web Parts - SPSMilan
Create SASSY Web Parts - SPSMilan
 
CSS3
CSS3CSS3
CSS3
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS Architecture
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for css
 
Create SASSy web parts in SPFx
Create SASSy web parts in SPFxCreate SASSy web parts in SPFx
Create SASSy web parts in SPFx
 

More from Joanna Franchetti

More from Joanna Franchetti (8)

Web bluetooth
Web bluetoothWeb bluetooth
Web bluetooth
 
Intersection observer for js oxford
Intersection observer for js oxfordIntersection observer for js oxford
Intersection observer for js oxford
 
Lego in a washing machine
Lego in a washing machineLego in a washing machine
Lego in a washing machine
 
Box model
Box modelBox model
Box model
 
Your CSS is Awesome
Your CSS is AwesomeYour CSS is Awesome
Your CSS is Awesome
 
How to make your design process agile
How to make your design process agileHow to make your design process agile
How to make your design process agile
 
Don't Panic - Starting Out in Web Development
Don't Panic - Starting Out in Web DevelopmentDon't Panic - Starting Out in Web Development
Don't Panic - Starting Out in Web Development
 
Smacss and bem
Smacss and bemSmacss and bem
Smacss and bem
 

Recently uploaded

React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 

Recently uploaded (20)

React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 

CSS in JS for CSS lovers

Editor's Notes

  1. Hey, lovely to meet you all My name is Jo, I’m a front end developer and recent addition to the Samsung Internet Advocacy team I am a self professed lover of CSS and what I’d like to talk to you about today is why you might consider putting your CSS in your Javascript
  2. We’re all here because we like to build things for the web, and we want to have the best tools at our disposal to make those things.
  3. HTML and CSS are great, you can get up and running in like half an hour, almost instantly start rendering things in the browser. But both of these technologies have a problem, they were originally created with the purpose of writing documents. The things that we want to build are often far more complicated than this, with sophisticated UX and UI. And this can lead to us creating what I like to call Chaotic Style Sheets. Hundreds of lines of unmanageable css. You wanna delete something off the site, gods only know what css applies to it, easier just to leave it in there… So what did developers do, well they made preprocessors
  4. LESS and & are two of the more popular CSS preprocessors They add new functionality to help you maintain your CSS files. You write code that is similar to plain CSS with some extra language constructions, compile it and the result of the compilation is a new CSS file. They brought us Nested rules, mixins, variables, conditional statements, and special functions (so that we can do maths, create/control colors). They’re really powerful tools, the code that we’re writing can start to look a lot more sensible, especially with nesting, but the CSS they generate can often be a nightmare, they’re a bit of a double edged sword So we needed a sensible way to construct our CSS, to stop it from becoming unmaintainable
  5. Which was where BEM and SMACSS came in SMACSS was a way of thinking about your website layout as separate modules, your header, your sidebar, an article etc This allowed us to split up our CSS into these separate modules. BEM is a naming convention to make the separation of those modules more obvious they gave us a common language to talk about styles, and components with our designers, and they allowed us to kind of namespace our styles. Let’s take a quick look at what that looks like
  6. Here we’ve got a form with a class of form and a modifier of xmas This could be thought of as it’s own module An input with a class of form__input, so when we look at the css we know that the input we’re styling is inside the form, in this way the style is ‘namespaced’ the styles for this input will not apply to any other inputs on the page that are not inside form.
  7. This is starting to help us with the problem of CSS being so global. You can see that this has allowed us to ‘namespace’ the styles, in so far as all of the styles for the form are under the form namespace Some way to stop our code from getting full of overwrite rules and !importants And we can start to modularise our code, so that it is easier to reuse parts or to delete them if we no longer need them So what are the problems here? Well firstly, the job of deciding what is a module/block and what is an element and how to name them is still cognitive load on the developer And those names can get long.
  8. This idea of modularisation is exactly what react is for, except instead of modules we call them components With react, we split our design up into components and render them to the page With react we can create our own components that we can reuse, combine, and nest to our heart’s content
  9. A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. With CSS Modules, your CSS class names become similar to local variables in JavaScript. We’re starting to fix the problem of the global scope of css By the way, a 'CSS Module' is just a .css file. You call it a 'CSS Module' if you plan on using it with a CSS Modules compiler. And while this is lovely, and we’re feeling very smug with our Modular css, it’s still a little ugly and requires the developer to think about the class names and the mapping between the styles and the components. And it still means that our styles are in a separate file to the component which is using them, which means that when reusing or deleting the component we have to make sure that we take it’s dependencies along with it. Not only that but CSS modules requires a lot of setup and lots of webpack configuration in order to get it working
  10. This is where Styled Components come in. The description of the joy of styled components is in the name. We’re creating styled components, the styles are part of the components. They’re in the JS! Dun dun dun…. But wait, I hear you cry, we remember this, applying styles directly to elements, that’s the whole reason why CSS was created! We want to decouple the CSS from the markup! Separation of concerns! But what if we reconsider what the ‘concerns’ are. Instead of separating our HTML, CSS and JS what if we want our components to be separate concerns, and we let Javascript, a programming language arguably designed to deal with complexity better than HTML and CSS are, handle this separation. With React, some of your components may have a state associated with them. Splitting the components that handle data or logic from components that handle styling allows us to keep concerns separate and to reason about changes easier. So, let’s take a look and we’ll see what you think.
  11. So, take a look at this HTML + CSS it should be fairly familiar, we’re applying styles to a paragraph with a class selector
  12. So this p with class intro and these styles can become We’ve made a component called Intro, which is a p and has some styles, and then we can use that component wherever we want on the page. So, what is happening here? styled.p is a function that when called, returns a react component that renders a p into the DOM. We’ve got some loveliness from ES6 meaning that we can use this tagged template literal, the bit between the backticks, and no parenthesis and the function will be called with the string inside the backticks passed as its first argument. The created react component has a unique generated class attached to it by styled components that will have the styles from the template literal associated with it. So, the best way to learn is to do, let’s dive in with some live coding!