leveling up css with smacss and bem
TRANSCRIPT
Leveling up CSS with SMACSS and BEM
By: Zack Hawkins
Drupalcamp AtlantaOctober 16th, 2015
Zack HawkinsTheming Manager
@ThatZackHawkins
Links: https://goo.gl/QDTPl1
● Reviewing lessons learned the hard way
● Introduction to SMACSS and BEM
● Theme architecture
● Using SMACSS and BEM with Drupal
● Refactoring current or inherited projects to be less awful
@Mediacurrent
Agenda
Writing CSS is easylooking after it is not.
~ Harry Roberts csswizardry.com
@Mediacurrent
Lessons Learned the Hard Way
@Mediacurrent
Why Does It Matter● Difficulty modifying projects
without regressions
● Inability to delete or refactor older code
● Specificity issues
● Organizational issues
● Hatred of oneself
@Mediacurrent
SMACSSsmacss.comJonathan Snook
@Mediacurrent
Block, Element, Modifieren.bem.infocss-tricks.com/bem-101company.yandex.com
@Mediacurrent
SMACSS + BEM
@Mediacurrent
DRUPAL FLAVORED SMACSS + BEM● Base● Layout● Components
○ Component - BEM (Block)○ Element - BEM○ Modifier - BEM○ State○ Skin (theme)
SMACSS● Base● Layout● Module● State● Theme
BEM● Block● Element● Modifier
BEM● .mediablock = component (block)
● .mediablock__img = element
● .mediablock--reversed = modifier
Warnings:
● Don’t go cray with elements● Don’t try to match the DOM● It is what you want it to be
Base (SMACSS)
● Default styling with no classes applied
● No classes, no ID’s, no importants
● Reset / Normalize.css
Layout (SMACSS)
● Prefixed with an l-l-header, l-footer, l-2-col
● Header, Footer, Grids
● Reusable page layouts
● Helper layout classes such as l-center, l-padded.
Components (SMACSS)
● Meat of the site
● Navigation bars, callouts, carousels, media blocks, etc.
● Uses BEM naming convention to break apart pieces of a component and keep the specificity low
Democodepen.io/zackhawkins/pen/waZbex
@Mediacurrent
● Easy to navigate ( no more sourcemaps )
● No style collisions
● Avoids specificity battles ( Less nesting )
● Easier to reuse, recycle, or repurpose
● Promotes consistency
● Easy to hand over
Benefits of BEM + SMACSS
@Mediacurrent
That’s nice… but Drupal?
@Mediacurrent
You have to want it● Base:
○ Unset Drupal system and contrib CSS and add it to custom theme
● Components:
○ tpl files
○ Custom view modes with tpl files
○ CTools content type plugins
○ Theme hooks and functions
● Layout:
○ Custom panels layouts
● Normalize.css
● Unset Drupal contrib provided CSS
○ http://fourword.fourkitchens.com/article/use-advagg-information-tab-debug-or-optimize-css-and-js-aggregates-drupal-7
○ https://www.drupal.org/project/magic
○ https://www.drupal.org/project/omega
● Add contrib CSS you need within the theme
.tpl.php ● Enable theme debug
https://www.drupal.org/node/223440
● Use Fences to clean up markuphttps://www.drupal.org/node/1679684
● Use Field Formatter Class to add… classes to fields.https://www.drupal.org/project/field_formatter_classhttps://www.drupal.org/project/field_group
Views ● Create custom view modes with
custom tplshttp://pingv.com/blog/custom-drupal-7-view-modes-different-ways-see-your-content
● Use the global field + token hackhttps://www.mediacurrent.com/blog/ultimate-markup-control-in-views
● Use semantic views modulehttps://www.drupal.org/project/semanticviews
Also, views hates underscores.
& More ● CTools content type plugins
http://www.pixelite.co.nz/article/building-custom-content-panes-aka-ctools-content-types-panels-3-and-drupal-7/
● Theme hooks and functions
Panels layouts ● Creating custom panels layouts
https://www.drupal.org/node/495654
● Use the example from Zenhttps://www.drupal.org/project/zen
● Don’t mix front-end and admin styles
Levels of Acceptable
@Mediacurrent
Levels of acceptable
Perfect World● Partial named the same as the
component name
● Uses BEM naming convention
● Keeps specificity as low as possible
Levels of acceptable
Normal World● Partial named the same as the
component name
● Keeps specificity as low as possible
● Name spaced using custom component class to avoid stylecollisions
Levels of acceptable
At least we can grep for it World● Tries to keep specificity as low as possible
● Name spaced using Drupal provided class to avoid style spilling into unwanted areas
● Junk’s gotta get done
Refactoring Older Projects
@Mediacurrent
Break it up
● Deal with it bit by bit
● Move components into their own partials
● Add documentation and implement code standards as needed
CSS / Sass Standards
● cssguidelin.es
● sass-guidelin.es
● benfrain.com/the-ten-
commandments-of-sane-style-
sheets
● CSS Architecture for Drupal 8 drupal.
org/node/1887918
Resources
@Mediacurrent
BEM, SMACSS & More
● css-tricks.com/bem-101
● smacss.com
● sitepoint.com/bem-smacss-advice-
from-developers
● csswizardry.com
Thank You!Questions?
@Mediacurrent Mediacurrent.com
slideshare.net/mediacurrent
Links: https://goo.gl/QDTPl1