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!