SlideShare a Scribd company logo
1 of 21
smacssandbem
Design Patterns to Improve your CSS
whymodularcss?
Working on a large project?
A complicated layout?
Working with multiple developers/designers?
baserules
modulestyles
layoutstyles
staterules
themerules
baserules
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
Applied to an element using an
element selector along with
any pseudo-classes.
No class or ID selectors.
Defines default styles for an
element
Includes
Reset styles
Default link styles
Default font styles
Body backgrounds
Never use!important in a
Base style.
modulestyles
Discrete components
Modules can be contained within other
modules
They can be easily moved about the
layout
● Navigation bar
● Carousel
● Dialog
● Widget
● Article
layoutrules
‘Major’ components of the page
staterules
Augments and overrides all other styles
Applied to an element or module
● Active/inactive
● Collapsed/Expanded
● Success/Error
B.E.M.
Logical naming structure for your CSS
whatisbem? .block {...}
.block__element {...}
.block__element--modifier{...}Block - Element - Modifier
.eventinfo {...}
.eventinfo__title {...}
.eventinfo__image {...}
.eventinfo__date {...}
.eventinfo__detail--location {...}
.eventinfo {...}
.eventinfo__title {...}
.eventinfo__image {...}
.eventinfo__date {...}
.eventinfo__detail--location {...}
.eventinfo__detail--time {...}
givebematry!
It can seem a bit of an ugly
duckling at first, but when
used right, it can be
incredibly powerful
@thisisjofrank

More Related Content

Similar to Smacss and bem

We Need to Talk About CSS
We Need to Talk About CSSWe Need to Talk About CSS
We Need to Talk About CSSSean Durham
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8RohanMistry15
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017La Drupalera
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designersSingsys Pte Ltd
 
HTML5- Create divisions in a web page
HTML5- Create divisions in a web pageHTML5- Create divisions in a web page
HTML5- Create divisions in a web pageGrayzon Gonzales, LPT
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Patrick Lauke
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookFuture Insights
 
Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1Jesus Obenita Jr.
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS ArchitectureJohn Need
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanFront end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanDeepu S Nath
 
ADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningGeorge Estebe
 

Similar to Smacss and bem (20)

We Need to Talk About CSS
We Need to Talk About CSSWe Need to Talk About CSS
We Need to Talk About CSS
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
CSS 101
CSS 101CSS 101
CSS 101
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
 
HTML5- Create divisions in a web page
HTML5- Create divisions in a web pageHTML5- Create divisions in a web page
HTML5- Create divisions in a web page
 
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University ...
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 
Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS Architecture
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanFront end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
 
What is Modular CSS?
What is Modular CSS?What is Modular CSS?
What is Modular CSS?
 
ADF - Layout Managers and Skinning
ADF - Layout Managers and SkinningADF - Layout Managers and Skinning
ADF - Layout Managers and Skinning
 

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
 
CSS in JS for CSS lovers
CSS in JS for CSS loversCSS in JS for CSS lovers
CSS in JS for CSS lovers
 
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
 

Recently uploaded

H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
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
 
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
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
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
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
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
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 

Recently uploaded (20)

H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
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
 
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
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
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
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.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
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 

Smacss and bem

Editor's Notes

  1. Scalable and modular architecture for CSS and BEM, which is a clear naming convention for your modular css
  2. Modular CSS means breaking up your CSS into reusable components This can be incredibly powerful when working on large projects, each of your CSS files can be small, clearly named and easily removed if no longer necessary If you’re working on a complex layout, modular css can help you break the design down, the components will be easy to edit and understand. I showed a SMACSS project to a non developer friend of mine and he immediately understood what the styles were doing, who can claim that a non developer would be able to understand their usual css? SMACSS defines a common language to use within your styles, for designers and developers this is a massive time saver when adding new colleagues to a project or when discussing changes/additions.
  3. So what does SMACSS consist of? We’ll go over these all now
  4. A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page. This, mostly likely includes your Reset CSS and will also include your typography rules, your default link styles, ul styles, li styles etc body background is one that lots of people overlook, never assume that the user will have a white background, always set it. Never ever use important when writing your reset styles, i would hope that would be self explanitory.
  5. Now that we have our base styles, we need to actually start styling up things on the page, and we do this by separating them into modules Modules are sometimes referred to as minor components. They’re discrete components on the page, for example a navigation, or a dialog. lets take a look at a design and point out some modules
  6. Modules can be thought of at an ‘element level’, they can’t be broken down any further, so like an h1, or a link
  7. Groups of elements with particular styles are also modules, i like to think of these as molecular, as in multiple elements combine to make a molecule, so here we’ve got a piece of text with a link and an icon, or text with an icon, or three styles of text with a border
  8. Groups of groups of molecules make up a module, and groups of modules can make up a module too! once you’ve spilt the page up into all the modules you want, then you need the rules about where these modules go, which are the layout rules
  9. Whereas modules are minor components, the layout rules refer to major components, so header, footer, sidebar, main etc if we take a look back at our earlier example, you should be able to clearly see the layout components
  10. so we’ve got the main content, the sidebar, the navigation and the header, the footer would also be a layout element, along with the container for the content so, we’ve build up our page from the atoms up, but we still need a few other style options, namely the state rules
  11. these govern what the elements do if the change state, for example a button that you can or can’t click on, or a collapsed or expanded accordion. These styles can be applied to elements or to entire modules there was one state rule shown on the Live Nation layout
  12. The final part of SMACSS is the theme rules, these you would use if you were planning on having multiple themes for your site, something like the BBC website is a great example of good theming, they have a set of designs, layouts and modules for each program and each can have its own colour scheme. How you do your theming will really depend upon what you are changing between themes, but the components that we’ve already introduced from our module and layout rules should make this easier. So, now that we’ve looked at how to break up your styles, we can talk about how to name them in a sensible way. And for that we need to take a look at BEM
  13. A strict, logical naming structure
  14. BEM stands for block, element, modifier It was designed to be transparent and informative, you name the modules for what they do and their internals for what they are The reason for the, somewhat ugly, double dash/hyphen is that it allows you to use a single dash or hyphen in your class names So, if we were looking at the smacss structure from before, the block would likely be your module, the element, the elements within that module and the modifiers would be used to change the style of an element, perhaps if there were multiple of the same element inside the module. The point of BEM is to make it immediately obvious what your styles are being applied to, and how each of the elements relate to one another. I know, it looks weird, but bear with me here, the gains that you get are definitely worth it. So, if we go back to the page from before, we can take a look at how to style it with this pattern.
  15. If we look at the highlighted section, We’ve got a block, that’s our container, which contains the event information, so we’ll call it ‘eventinfo’ Then we’ve got a title, an image, a date block,a venue with an icon and a link and a time with an icon. Have a quick think about how you’d style up this component.
  16. So, our block is eventinfo, then the elements within that are named for the block, separated with a double underscore we’ve got two elements which could theoretically extend from the same styles, they’ve both got icons, and text of the same size/color In order to do this we use the modifier, which is separated with a double hyphen. We could also put the date in here, then we’d have eventinfo__date Looking at the rest of the page from earlier, we can see that the date is actually reused in a carousel further down the page, so if it were me building it, I’d make the date a module of its own, style the components that don’t change in that date module, so in this case, the size and layout of the text, and then use our eventinfo__date to extend from that module and apply the rules for how it looks in /this/ module, eg the colour and background color.
  17. So, you’ll notice a few things looking at these selectors, firstly lots of classes, part of the reason for that is that we’re trying to make reusable modules, there can only be one id on the page and so that would instantly make the module more difficult to make reusable the other reason is to avoid the priority hijacking that you get from IDs, if we use only classes then every style has the same priority and we’ve not ruined the cascade of the styles, making it much easier for use to make changes in the future and to maintain our lack of need for nesting. lets look at some code in the wild, this is an example of a module
  18. You might notice that there is no modifiers in this file, I rarely find myself needing modifiers with the design you’ve seen. As far as applying modifiers to cause a state change, I personally prefer to add a new class, something along the lines of ‘.is-active’, this is because of the need to create extends if you’re using a modifier for a state and the extra complication that is caused by needing to add and remove different classes with js. This is however, a personal preference, and you’ll find the more you use BEM the more you can sculpt it to fit with your project. The other thing to notice is that there is no nesting. Like using IDs, nesting can cause all kinds of woes later on in your styling, avoid nesting and you can avoid needing to use !important as much as possible. One of the great things about BEM is that it is self regulating, if you notice that you’re needing lots of underscores or if your css files are getting too long then it is a good indication that you need to split your module up further. It is tempting, with SCSS, to use the ampersand to nest the selectors inside one another, but although that won’t cause the same issues as standard nesting, it does make your CSS immediately less legible and far less searchable for editing in the future, BEM is supposed to be making our jobs as easy as possible, don’t undo your good work! Adam gave an excellent talk earlier today (https://adz.co.de/talks/#the_brain_the_gut_and_your_job.html) To quote him, ‘The project is more important than your clever code’, if an intern can’t understand your clever code then you’ve failed. We’ve got a large number of components, i guess you can see that from the number of folders here, if these were all in one file it would be a nightmare, modularising them allows us to easily add and remove components, then we have a master CSS file for each page which imports the modules that it needs,
  19. We have common styles that are used on every page and then we can include the modules that each page needs individually none of the files are longer than a 400 lines long, they’re a pleasure to maintain and quick to read and debug
  20. The base styles are in a reset file, and a typography file, these can extend from other palette, sizing and viewports files to get the variables they need. Components can extend from the typography file to get the styles they need The module styles are separated into components and each component has its own scss file There is a containers file which describes how each of the available containers for modules can look and modules can extend from these containers The layout styles are written as a component, they describe how the splitting of the page works at desktop and mobile. we also have created widgets which can be repeated within components, So there you have it, that is how LN does their styles, and to be honest is is a joy to work on, most of the time!
  21. So, to recap Make your CSS modular, separate out the layout, modules and base styles keep your modules small, if you think its getting to big, reconsider the makeup of the modules, can you break it down further? don’t nest! You’ll thank yourself in the future drop your IDs, a module can’t be reused if you’ve given it an ID name your classes sensibly, even if you don’t want to go with bem, this is an incredibly important take away I hope you’ll give BEM a go, it does seem awkward and verbose at first, but I think you’ll grow to love it.