A primer on SMACSS standards, the direction of CSS organization in Drupal 8, and best practices for CSS preprocessors like Sass.

1. smacssPREPARING DRUPAL 8 CSS ORGANIZATION.

2. SMACSS in Drupal 8 is not required or a standard.
However, it is a best-practice.
Implementing SMACSS in Drupal 8 is a work-in-progress.
A NOTE TO THE READER.
hey,listen
Follow along: https://www.drupal.org/node/1887922

3. A LITTLE ABOUT MYSELF.
ericsembrat
Web Manager at the College of Engineering at
Georgia Tech.
President of the Atlanta Drupal User’s Group.
Doctoral student at Georgia State University.
Learn more: http://www.webbeh.com

4. cssorganizationTHE NEVER-ENDING STRUGGLE FOR SANITY.

5. CONTROL-F ALL DAY.
disorganized
CSS best-practices in Drupal 7 didn’t exist beyond basic
CSS practices.
So, many of your theme frameworks have lots of different
confusing CSS organization.
Go back in time: https://www.drupal.org/node/302199

6. Our old friend Zen (3.x).

7. Or, our newer friend - Zen (5.x).

8. (how I feel when navigating all the different
CSS structures to find relevant styles)

9. there’saneasierwayLET’S BRING SOME BEST-PRACTICES IN FRONT-END INTO DRUPAL.

10. smacssAll about the smacks.

11. SMACSS (pronounced “smacks”) is more style guide than rigid framework.
There is no library within here for you to download or install. SMACSS is a
way to examine your design process and as a way to fit those rigid
frameworks into a flexible thought process. It is an attempt to document
a consistent approach to site development when using CSS.
Scalable (and)
Modular
Architecture (for)
CSS

12. Buy the book: https://smacss.com/

13. SMACSS follows object-oriented programming (OO) in that its goals are to:
Increase the semantic value of a section of html and content
Decrease the expectation of a specific html structure
More generally, SMACSS’ focus is on locating and organizing patterns
throughout your CSS so that it is reusable and easier to segment and
adjust.

14. SMACSS’ design is intended to be a starting point (not an end-all) to
building a style guide and CSS standard.
Organization is not rigidly defined.
A NOTE TO THE READER.
hey,listen

15. base
layout
module
state
theme

16. base
Base rules are applied directly to elements through element selectors,
descendent selectors, child selectors, pseudo-classes, however not specific
class or ID selectors.
(remember reset.css? this is where that goes)

17. layout
Layout rules apply directly to the sizes and locations of your major
template components (header, footer, sidebar, main area).

18. module
Minor page components include navigation bars and widgets. They tend to
be inside layout components and even within other modules.
Modules should be designed so they can exist on their own, which gives
them greater flexibility in being combined and moved around to different
parts of the design without breaking the layout. With modules we do want
to avoid IDs and element selectors. More reuse means classes.

19. state
A state is something that augments and overrides all other styles.
States are generally applied to the same element as a layout rule or
applied to the same element as a base module class.

20. theme
A theme defines colors and images that give your application or site its
look and feel.
Themes can affect any of the primary types. It could override base styles
like default link colors. It could change module elements such as chrome
colors and borders. It could affect layout with different arrangements. It
could also alter how states look.

21. base
layout
module
state
theme

22. base
layout
module
state
theme

23. base
layout
component
state
theme

24. drupal8themes?SMACSS + Drupal for themers.

25. css/
base/
{base file name}.css
layout/
{layout file name}.css
component/
{component file name}.css
theme/
{theme file name}.css
File structure for Drupal 8 theme CSS:

26. Always separate Base, Layout, and Component
styles into their own files.
Drupal will aggregate these separate files into one
file, so there is no performance problem with this
practice.)

27. For complex themes, consider placing each
component or component family in its own file.
State rules, including media queries, should be
included with the component to which they
apply.

28. drupal8modules?SMACSS + Drupal for coders.

29. module_name.module.css: This file should hold the minimal styles needed
to get the module's functionality working. (layout, component state styles).
module_name.theme.css: This file should hold extra styles to make the
module's functionality aesthetically pleasing. (theme styles).
module_name.admin.css: This file should hold the minimal styles needed
to get the module's admin screens working. (layout, component state
styles).
On admin screens, the module may choose to load the *.module.css in
addition to the *.admin.css file.
module_name.admin.theme.css: This file should hold extra styles to make
the module's admin screens aesthetically pleasing. (theme styles).
File structure for Drupal 8 theme CSS:

30. Note: Modules should never have any base styles.
Drupal core's modules do not have any base
styles. Instead Drupal core uses the Normalize.css
library augmented with a drupal.base.css library.

31. helpwithsmacss?CSS preprocessors to the rescue.

32. Sass (and contributed plugins) help to encourage
consistency through the usage of mixins,
variables, loops, and libraries.

33. Mixins

34. Variables

35. Loops / Logic

36. Libraries

37. Partial Files

38. libsass
sass-globbing
css3 library (compass,
bourbon)
plugins as needed
cssfiles
sassfiles

39. libsass
sass-globbing
css3 library (compass,
bourbon)
plugins as needed
cssfiles
sassfiles
your css (as sass files)
compiled css files

40. Sass-globbing?

41. base layout component theme

42. questions?