Internal tech talk for JS developers about Scaling large css codebase. And how to maintain CSS in effective way.

1. Scalable CSS
Architecture
Ngoc Tu Nguyen

2. CSS Features
❖ Two main key features of CSS
❖ Cascade
❖ Inheritence

3. Cascade
❖ What is cascade?
➢ algorithm used by browser to determine which property should be used
❖ How does it work?
➢ 3 factors
■ Importance
■ Source Order
■ Specificity

4. Inheritence
❖ What is inheritence?

5. General Rules
❖ Use classes over IDs (test case: http://bit.ly/2zqOurs)
❖ Avoid long chaining of classes
❖ Avoid overqualyfing
❖ Do not overuse !important declarations
❖ Do not write selectors that are dependent on location
❖ Avoid deep nesting
❖ Document your code

6. What does it even mean Scalable CSS?
❖ CSS open for future expanding
❖ Easily understandable by other developers, written in systematic way
❖ Component oriented
❖ Manageable codebase

7. How to achive robust Scalable CSS Architecture?
❖ Introduce naming conventions
❖ Write classes for reusability
❖ The code should be predictable
❖ ITCSS philosophy - Harry Roberts

8. Naming Conventions
❖ BEM (Block, Element, Modifier)
➢ Yandex
❖ OOCSS (Object Oriented CSS)
➢ Nicole Sulivan
❖ SMACSS (Scalable Modular Architecture CSS)
➢ Jonathan Snook

9. Improved version of BEM
❖ Basic syntax [BLOCK]__[ELEMENT]--[MODIFIER]
❖ Improved version of BEM by adding prefixes, to indicate what does the
part of the code do
❖ Proposed by Harry Roberts
❖ Examples: “c-” represents a component, “u-” represents utility helper
class, “t-” represents thematical class, “o-” represents an object, also use
“is-”, “has-” to represent states in addition to BEM

10. Example

12. Object Oriented CSS
❖ Approach proposed by Nicole Sullivan
❖ Introduced Media Object
❖ Media Object is repeated design pattern
❖ She divided code into code that influences structure and other that
influences only the skin
❖ Object classes are open to extension, closed to modification
❖ “The media object is an image to the left, with descriptive content to the right”

14. ITCSS Architecture
❖ Inverted triangle CSS architecture
❖ Sane, scalable, managed architecture
❖ It takes advantage of CSS feature - cascade, inheritence

16. What does each layer represent?
❖ Settings - fonts, colors, variables
❖ Tools - mixins, functions
❖ Generic - resets, normalizers, box-sizing
❖ Elements - bare HTML elements
❖ Objects - class based selectors (wrappers, containers, grids etc.)
❖ Components - specific UI components
❖ Utility - helper classes (eg. text-center, text-left etc.)

21. Managing CSS Projects [online]. Available at:
http://csswizardry.net/talks/2014/11/itcss-dafed.pdf
ITCSS Talk - Video [online]. Available at:
https://goo.gl/2XXi9U
Sources