Front End Methodologies

Front-End-Methodologies.md

#Front End Resources

• HTML
• SASS/CSS
• Front End Methodologies
  • Where to start
  • (Well)known methodologies:
    • Atomic / PatternLab
    • BEM
    • DoCSSa
    • MCSS
    • OOCSS
    • React & CSS.
    • SMACSS
• Misc. Blogs and Such

##HTML The main thing to remember here is that markup should be semantic and as light weight as possible. We should actively avoid nesting several elements deep without a direct purpose. Finally: <div> is a completely meaningless element.

• http://diveintohtml5.info/
• http://nicolasgallagher.com/thoughts-on-new-html5-elements/
• http://nicolasgallagher.com/new-html5-elements-summary-and-figcaption/
• http://www.lynda.com/HTML-tutorials/HTML5-Structure-Syntax-Semantics/182177-2.html

##SASS/CSS

• http://csswizardry.com/2014/10/the-specificity-graph/
• http://www.lynda.com/CSS-tutorials/CSS-Selectors/192036-2.html
• http://thesassway.com/
• https://medium.com/@dannysmith/on-sass-and-other-css-preprocessors-24403fc80b6a
• https://medium.com/@hdx28/how-i-write-css-ff52c9f2f3f5
• https://medium.com/front-end-development/what-i-learned-from-css-preprocessors-d698aed48029
• https://medium.com/@rogerdudler/front-end-technology-stack-survey-2014-809f7a8c92f3

##Front End Methodologies ###Where to start

• Purification of Web Development
• Just try and do a good job.
• This important, but terrible idea
  • Video of the talk
  • CodePen 'response'

###(Well)known methodologies: This list is purposefully written alphabetically so that I don't seem bias to one idea or another. However, if you want my personally opinion, Just Try & Do a Good Job gets it right.

Generic Overviews

####Atomic / PatternLab

• http://patternlab.io/

####BEM

• https://css-tricks.com/bem-101/
• http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
• http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
• https://en.bem.info/method/

####DoCSSa

• http://docssa.info/

####MCSS

• http://operatino.github.io/MCSS/en/

####OOCSS

• https://github.com/stubbornella/oocss/wiki
• http://oocss.org/
• http://thesassway.com/advanced/modular-css-naming-conventions

####React & CSS.

• https://speakerdeck.com/vjeux/react-css-in-js

####SMACSS https://smacss.com/

Misc. Blogs and Such

• http://csswizardry.com/
• One of my favorite bloggers / writers / front end engineers Nicolas Gallagher has a wonderful collection of articles, is super critical of 'current trends' and an advocate for writing sensible code.
• http://sass.logdown.com/
• https://css-tricks.com/category/w3conf-2013/
• css guidlines
• shame.css