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
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
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
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”