Today there are multiple CSS frameworks, pre-processors, grids and naming strategies that can be used to organize your codebase. The question is, how do you sort through all the noise and figure out which of theses new CSS coding strategies and tools are best for your specific project and how do you combine them in order to create the best environment for styling? (Created for a Workshop)

1. PUTTING IT ALL TOGETHER: COMBINING CSS TOOLS AND
METHODOLOGIES
By: Isatu (Isa) Conteh
September 16th 2017

2. Section 1: Details

3. What are we trying to do/learn here? Why?
1. Highest Level: Figure out how to set up and organize
your css
2. Understanding why organizing css matters
3. Knowing what your options are for css tooling and
techniques
4. Figuring out how to choose what you need
5. And how to implement these solutions in your
projects and get them to work well with other front-
end (and back-end) tools

4. Who is this person trying to teach me things?
What does she know?

5. Background:
1. Professional: Developer at the Washington Post
2. Professional: Web Developer at Speak Agent
3. Volunteer: Women Who Code DC Front-end Lab
Lead
4. Volunteer: Women Who Code DC Project Lead

6. Time spent doing front-endy things
1. At the Washington Post: ~15% so far
2. At Speak Agent: 100% Angular 1.4
3. As Front-end Lab Lead: 100%
4. *Bonus* - started out with static web pages ~5 years
ago: 100%
5. **Double Bonus** - use front-end tools for side
project: 70%

7. Where did I get the idea to do this presentation from?
Why we’re focusing on CSS?

8. Baseline:
1. HTML/CSS
Nice to Haves:
What I’m hoping you know
1. Used some helpful tools (SASS, LESS, Bootstrap)
2. Some experience with integrating front-end with
back-end.

9. Looking to brush up on the fundamentals rst? Try
Here..
1. Codeacademy:
2. KhanAcademy:
3. Building Your rst webpage:
4. CodeSchool:
https://www.codecademy.com/learn/learn-html-css
https://www.khanacademy.org/computing/computer-
programming/html-css
http://learn.shayhowe.com/html-css/building-your-
rst-web-page/
https://www.codeschool.com/

10. Section 2 — Tools

11. Frameworks (CSS, not javascript)
De nition: CSS frameworks are pre-prepared software
frameworks that are meant to allow for easier, more
standards-compliant web design using the Cascading
Style Sheets language. Most of these frameworks
contain at least a grid.

12. Frameworks (CSS, not javascript)
Bootstrap:
Foundation:
Materialize:
Pure CSS:
http://getbootstrap.com/
http://foundation.zurb.com/
http://materializecss.com/
https://purecss.io/

13. Frameworks: Special Mention
Some other front end programs (usually javascript
application tools) also include their own css
frameworks. They are used in a similar manner to
external css frameworks. One example is:
1. Ionic: https://ionicframework.com/

14. Preprocessors
De nition: Preprocessors are programs that take code
written in their own speci c language and convert it to
CSS.

15. Preprocessors
SASS (Syntactically Awesome Stylesheets)
SCSS (Sassy CSS)
LESS
Stylus
http://sass-lang.com/
http://lesscss.org/
http://stylus-lang.com/

16. Naming Methodologies/Conventions
De nition: Rules and strategies for writing and using
css classes, id's etc. that make css codebases easier to
read and debug.

17. Naming Methodologies
BEM (Block, Element, Modi er)
SMACCS (Scalable and Modular Architecture for
CSS)
OOCSS (Object Oriented CSS)
ITCSS (Inverted Triangle CSS)
http://getbem.com/
https://smacss.com/
https://github.com/stubbornella/oocss/wiki
https://www.x ve.co/blog/itcss-scalable-
maintainable-css-architecture/

18. Other tools: Libraries and such
De nition: other programs and tools that can help with
organizing and using css

19. Other Tools: Libraries and such
Flexbox
Font Awesome
Animate.css
https:// exbox.io/
http://fontawesome.io/
https://daneden.github.io/animate.css/

20. Finding Information
Information can most easily be found in the form of:
Docs (Documentation)
Blogs (Medium, CSS Tricks etc.)
Tutorials/ Online Classes (Udemy, Linda.com,
Udacity etc.)

21. Section 3 — Choices

22. What to use, When to use it, When not to use it

23. 1. Do you need one?
How large is your project?
Do you need out of the box features?
How much time do you have?
Are there any size or speed requirements?
Choosing between frameworks
Things to consider/think about:

24. 2. What to consider when choosing.
Is there a lot of customization involved?
Can the design be easily adapted?
Do you and or your developers have any prior
experience with any of them?
Choosing between frameworks
Things to consider/think about:

25. 1. Do you need one?
Will you be writing a lot of css?
Where and how is your site being hosted?
Are you or the people on your team more traditional
programmers?
Again, are there any size or speed requirements?
Choosing between preprocessors
Things to consider/think about:

26. 2. What to consider when choosing.
Are you using any other speci c front-end tools that
may be more useful with one than the other?
Again, are you or any of the other devs on your team
more familiar with one or the other?
Is exibility important (Similar to customization
question)?
Choosing between preprocessors
Things to consider/think about:

27. 1. Do you need one?
Are you styling a lot of different content?
Will many people be working on your project?
Are you worried about maintainability?
Will a good naming strategy aid in making
communication better?
Choosing between naming methodologies/conventions
Things to consider/think about:

28. 2. What to consider when choosing.
How do you discuss your design?
When guring out how to style certain parts of a
page, how do you break things up?
And of course, do you and or your developers have
any prior experience with any of the available
options?
Choosing between naming methodologies/conventions
Things to consider/think about:

29. 1. Do you need one?
Are there any extra features you need that can be
done in css that don't exist in any of the other
formats?
Will using a library cut down on the work you have to
do to create it?
Do you only need a select few css features?
Choosing between libraries
Things to consider/think about:

30. 2. What to consider when choosing.
Are there any other options?
Which is easiest to use or incorporate in your
existing project?
Does whatever design change it makes really beni t
the project?
Choosing between libraries
Things to consider/think about:

31. Section 4 — Implementation

32. Ways to Identify possible con icts between tools
1. Througly study documentation
2. Read up on other people's experiences with
preferred tools
3. Ask for opinions within your network
4. Try using tools together on a smaller test/side
project

33. Ways to Identify possible con icts between tools
You decide to create a blogging platform using the
following tools/methods
Framework: Bootstrap
Preprocessor: SASS
Naming Convention: SMACCS
Example:

34. Ways to Identify possible con icts between tools
You attempt to get comfortable using all three
products together and run into the following issue:
-Bootstrap has it's own naming conventions. How do
you then use it's features with the naming conventions
you created using the SMACCS method
Example:

35. Figuring out how to x them
1. Dig deeper: look up solutions to the speci c issue
you're having
2. Again, ask around
3. Experiment

36. Figuring out how to x them
After reading up on the issue via a blog post by
another developer on Medium, you decide to:
Try incorporating bootstrap in your SMACSS names by
extending their features into it using SASS
Example:

37. Setting up your development environment and
incorporating tools and solutions
Pretty straight forward...
1. Think about how solutions might scale
2. Think about other tools that may be necessary to get
tools to work together in larger environments

38. Setting up your development environment and
incorporating tools and solutions
You start a new project, pull in SASS, Bootstrap and
customised SMACCS. Because the project is bigger:
1. You decide to download a local version of bootstrap
instead of relying on a CDN
2. You decide to compile your SASS with Compass
instead of testing it out in codepen
Example:

39. Setting up your development environment and
incorporating tools and solutions
3. And you (or your devops person) decide that when
it's ready for launch you'll deploy it using AWS for
relatively easy compilation rather than just launching it
in Github pages.
Example:

40. Quick Mention: Setting up a Style Guide
Style guides are a set of standards for the writing and
design of documents, either for general use or for a
speci c publication, organization, or eld.
Useful for/as:
1. Onboarding
2. Setting standards
3. Quick Reference

41. Quick Mention: Setting up a Style Guide
To learn more, start here: An in Depth Overview of
Living Style Guide Tools

42. THAT'S ALL FOLKS! THANKS FOR LISTENING
Now for the practice portion of lecture