AN IN DEPTH GUIDE
TO WRITING BETTER &
CLEANER CSS
CSS
METHODOLOGIES
• Documented systems for authoring CSS that allows us to develop, maintain and scale
the frontend as a s...
CSS
METHODOLOGIES
• Documented systems for authoring CSS that allows us to develop, maintain and scale
the frontend as a s...
CSS
METHODOLOGIES
• Documented systems for authoring CSS that allows us to develop, maintain and scale
the frontend as a s...
TYPES OF CSS
METHODOLOGIES
SMACSS
Enables categorization, modularity, and organization. Best used with
SASS/SCSS or CSS wi...
METHODOLOGIES
IN DEPTH
SMACSS
• Focuses on categorization
• Less code repetition
• Easier maintenance
PURPOSE
How • Base
•...
METHODOLOGIES
IN DEPTH
SMACSS | BASE RULES
Base rule styles are implemented using element selectors rather than classes an...
METHODOLOGIES
IN DEPTH
SMACSS | LAYOUT RULES
Layouts are defined to be a major component, such as a header or footer eleme...
METHODOLOGIES
IN DEPTH
SMACSS | MODULE RULES
Modules are reusable components of a design. They can be carousels, navigatio...
METHODOLOGIES
IN DEPTH
SMACSS | STATE RULES
These rules describe how certain elements behave or are styled when they’re in...
METHODOLOGIES
IN DEPTH
SMACSS | THEME RULES
Theme rules aren’t used as often as other rules. However, theme rules would be...
METHODOLOGIES
IN DEPTH
BEM | NAMING CONVENTIONS
B for BLOCK
A block is a top-level element of a component. An example of a...
METHODOLOGIES
IN DEPTH
BEM | NAMING CONVENTIONS
E for ELEMENT
A block is a top-level element of a component. An example of...
METHODOLOGIES
IN DEPTH
BEM | NAMING CONVENTIONS
M for MODIFIER
These are essentially flags on elements that allow us to ov...
METHODOLOGIES
IN DEPTH
BEM | GUIDELINES
WHEN TO BEM
BEM isn’t always necessary. You could have one element follow the BEM ...
FINAL THOUGHTS
CSS METHODOLOGIES
Both SMACSS and BEM have their advantages and disadvantages. I have
adopted both methodol...
Nächste SlideShare
Wird geladen in …5
×

An In Depth Guide to Writing Better and Cleaner CSS

213 Aufrufe

Veröffentlicht am

This is an in depth overview of using both SMACSS and BEM to write better CSS that's more maintainable, cleaner, easier to read, and more efficient. It covers the major concepts of both methodologies in depth, but keeps the overall presentation short and concise, hence the "in depth overview."

The full article can be read here: http://codewithwes.com/articles/an-in-depth-guide-to-writing-better-and-cleaner-code

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

An In Depth Guide to Writing Better and Cleaner CSS

  1. 1. AN IN DEPTH GUIDE TO WRITING BETTER & CLEANER CSS
  2. 2. CSS METHODOLOGIES • Documented systems for authoring CSS that allows us to develop, maintain and scale the frontend as a set of modules What are methodologies?
  3. 3. CSS METHODOLOGIES • Documented systems for authoring CSS that allows us to develop, maintain and scale the frontend as a set of modules What are methodologies? • At all times, regardless of project size. Methodologies are built for organization, readability, maintainability and scalability. The more they are are implemented, the better your code will be. When should they be used?
  4. 4. CSS METHODOLOGIES • Documented systems for authoring CSS that allows us to develop, maintain and scale the frontend as a set of modules What are methodologies? • At all times, regardless of project size. Methodologies are built for organization, readability, maintainability and scalability. The more they are are implemented, the better your code will be. When should they be used? • CSS Best Practices • Class and ID naming conventions • Formatting • Organization • Ordering What can methodologies provide?
  5. 5. TYPES OF CSS METHODOLOGIES SMACSS Enables categorization, modularity, and organization. Best used with SASS/SCSS or CSS with concatenation. Block, Element, Modifier Enables high level semantics, readability, strict naming conventions and it keeps CSS specificity to a minimal level. Two major players
  6. 6. METHODOLOGIES IN DEPTH SMACSS • Focuses on categorization • Less code repetition • Easier maintenance PURPOSE How • Base • Layout • Module • State • Theme Stands for Scalable and Modular Architecture of CSS with the goal of increasing readability of HTML. “It is an attempt to document a consistent approach to site development when using CSS” (smacss.com). What
  7. 7. METHODOLOGIES IN DEPTH SMACSS | BASE RULES Base rule styles are implemented using element selectors rather than classes and IDs. This allows a CSS properties to be applied to all elements of the chosen selector. In other words, a global style. However, these should be default styles. BASE RULES
  8. 8. METHODOLOGIES IN DEPTH SMACSS | LAYOUT RULES Layouts are defined to be a major component, such as a header or footer element. Or they could be a series of components, however best practice dictates that these major components should be separated. A few things to note: • A single selector is usually called via class or ID • Modifier classes could be an additional factor to the layout LAYOUT RULES
  9. 9. METHODOLOGIES IN DEPTH SMACSS | MODULE RULES Modules are reusable components of a design. They can be carousels, navigations bars, popups, or footers. Pretty much anything component that is reused on your site across pages can be categorized as a module. Here is an example of what a module could be in HTML: MODULE RULES
  10. 10. METHODOLOGIES IN DEPTH SMACSS | STATE RULES These rules describe how certain elements behave or are styled when they’re in a different state. Think of the :hover, :active, and :focus CSS selectors. A few things to note: • Media queries are included • You can use class names that manipulate elements • You can use pseudo selectors STATE RULES
  11. 11. METHODOLOGIES IN DEPTH SMACSS | THEME RULES Theme rules aren’t used as often as other rules. However, theme rules would be used to define colors and typography that the entire site shares. This could be useful if you have different color schemes. For example, a different scheme for both a portfolio page and a team page. THEME RULES
  12. 12. METHODOLOGIES IN DEPTH BEM | NAMING CONVENTIONS B for BLOCK A block is a top-level element of a component. An example of a block would be a nav element. This is thought of as a parent to the usual unordered list element. Another example would be an unordered list on its own. The ul will be the block. The convention is to name the class after the block element, like so:
  13. 13. METHODOLOGIES IN DEPTH BEM | NAMING CONVENTIONS E for ELEMENT A block is a top-level element of a component. An example of a block would be a nav element. This is thought of as a parent to the usual unordered list element. Another example would be an unordered list on its own. The ul will be the block.
  14. 14. METHODOLOGIES IN DEPTH BEM | NAMING CONVENTIONS M for MODIFIER These are essentially flags on elements that allow us to override a given set of styles. This is extremely common with navigation list items because chances are you won’t want margin on the last item. Take a look at this example
  15. 15. METHODOLOGIES IN DEPTH BEM | GUIDELINES WHEN TO BEM BEM isn’t always necessary. You could have one element follow the BEM convention but then another not. What that means is that you should consider whether an element is an actual BEM element or it just happens to sit inside a BEM block. Here’s an example of something that doesn’t need to be BEM’D.
  16. 16. FINAL THOUGHTS CSS METHODOLOGIES Both SMACSS and BEM have their advantages and disadvantages. I have adopted both methodologies and haven’t yet found a reason to stop. SMACSS provides the organization for large scale projects, and BEM provides the strict rules for smaller scale projects. Adopt the two, modify them to your liking, and start creating cleaner, more organized, and more efficient code.

×