/mantra.am

Read. Code. Write. Repeat.

The UnlicenseUnlicense

mantra.am

Read. Code. Write. Repeat.

List of personal front-end best practice.

Content

  • my CSS conventions
    • BEM
    • Idiomatic CSS
    • js-delimited classes
    • OOCSS
    • CSS Code smell
  • Web page performance
    • Images and CSS sprites
    • Checking the performance
  • Responsive must
  • QA
  • WordPress workflow
  • Patterns
  • Other
  • Links

=========

My CSS conventions

##BEM

.block
.block__element
.block--modifier
.block__element--modifier
.block-name__element

.person 
.person__hand 
.person__nails 
.person__hand__nails

##Idiomatic CSS

##use JS- delimited classes

classes that are purely for js use

.js-classs

##OOCSS Worth bothering?

##Avoid code smell

♥

Gotta try this on next project ;) Unicode CSS classes

Web page performance

Images and CSS sprites

Use http://www.smushit.com/ysmush.it/ to sompress used images.

Use spriting in order to cut down number of HTTP requests. Avoid empty pixels. "if you can’t sprite an element because it’s fluid, you place an empty element inside it that you can fix the dimensions of that you then can sprite up" (csswizardry article on performance)

<a href="#"><i class="icon  icon--balicky"></i> Balicky</a>

CSS sprites caveats solutions on Smashing magazine (04/2012).

Check the page performance and refine

Use tools to check on performance during development and especially before going to production.

Responsive must

//TODO

  • viewport?

#QA ST 2 plugins: JSHint (http://jshint.com), SublimeLinter (https://github.com/SublimeLinter/SublimeLinter-for-ST2)

#WordPress development workflow Local development (XAMPP, SublimeText2, sometimes Stylus+Prepros, git repo) -> git push theme files to dev server (actually test server), push database with WP Migrate DB Pro -> deploy to production with (to be decided - deployhq?)

#Patterns

#Other

Social media

  • use og
  • use twittercards

#Links