perfect styling - how to write better css
TRANSCRIPT
Perfect Styling!How to write better CSS!
ARTEM TABALIN!
Styles Should Be!
Reusable!
Modular!
Consistent!
Compact!
Common Styling Issues!Scoped with page id !
Mixed layout and component styling!
Coupled with markup!
Deeply nested!
Styling Methodologies !
• OOCSS!Object-Oriented CSS!
• ACSS!Atomic CSS!
• BEM!Block Element Modifier!
• SMACSS!Scalable and Modular Architecture for CSS!
Object-Oriented CSS!
• Separate structure and skin!!!!
!
• Separate container and content!
Atomic CSS!!
• Each class represents a single styling unit!
BEM!
Block!.menu
Element!.menu_ _item
Modifier!.menu_ _item--active .menu--aside
SMACSS!• Base!
html, body, a, a:hover!
• Layout!#header, #footer, .l-fixed #header, .l-fixed #footer!
• Module!.form, .form-field, .form-field-label, .form-field-control!
• State!.is-collapsed, .is-active, .is-hidden!
• Theme!.theme-border, .theme-background!
Guidelines!Componentize. Naming rules. !Don’ts rules. Keep it rules. !
Componentize!
Separate content from container!
.search-box
.menu
.article
Naming Rules!Components. Modifiers. States. JS-related classes.!
Components!
Follow the pattern .component-subcmp-subcmp!
Modifiers!
Prefix modifier classes with .mod-!
!
States!
Prefix state classes with .is-!
!
JS-related Classes!
Prefix behavior classes with .js-!
• No styles for behavior classes!
• No presentation classes in JS!
Don’ts Rules!Avoid deep nesting. Avoid IDs. !Avoid type selectors. Avoid !important.!
Avoid Deep Nesting!
Avoid unnecessary rules nesting!
• Harder to reuse
• More verbose
!
Hard to override!
Avoid IDs!
Avoid using ID selector!
• Harder to reuse
• Can use only one on the page
!Single #navbar on the page
Have to use ID to override
Avoid Type Selectors!
Avoid using HTML type selector!
• Couples CSS and HTML
• Redundant overqualified selectors
!What if decided to use <li>
Lowers performance and compactness
Avoid using !important!
• Harder to override
• Accessibility software issues
!
Avoid !important!
Requires style with !important to override
Can be used for utility classes
Keep It Rules!Keep it compact. Keep it ordered.!!
Don’t put redundant rules or chars!
• Framework over custom • Use shorthands
• Don’t specify units for 0
• Don’t put leading zeros
!
Keep It Compact !
Put rules in the particular order!
1. mixins!.mixin(param)!
2. positioning!position, z-index, top, right, bottom, left!
3. box-model!display, overflow, width, height, padding, border, margin!
4. color!background, color!
5. text!font, line-height, text-align, text-decoration, text-transform!
6. other!
Keep It Ordered!
• Separate content and container!
• Dasherize class names!
• Use special prefixes!• .mod- for modifiers!• .is- for states!• .js- for js-related classes!
• Avoid deep nesting, ids, type selectors, !important!
• Don’t use redundant rules and chars!
• Put rules in the particular order!
Wrapping Up!
Thank you!!
Your questions, please!!ARTEM TABALIN!