Skip to content

Instantly share code, notes, and snippets.

@TheConnMan

TheConnMan/FrontendDevelopment.md

Last active August 29, 2015 14:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TheConnMan/e779c0978621d44c1c08 to your computer and use it in GitHub Desktop.
Save TheConnMan/e779c0978621d44c1c08 to your computer and use it in GitHub Desktop.
Download ZIP
A few notes about Frontend Dev best practices (from my experience)
Raw
FrontendDevelopment.md

Frontend Development

Discipline

  • HTML, CSS, and JS are all very free-form
  • Many different ways to do many different things

Keep Everything Clean

  • Indent everything correctly
  • Abstract out as much CSS and Javascript as possible
  • Limit inline CSS and JS as much as possible
  • Organize CSS files

CSS

  • CSS is extremely powerful, use it to your advantage
  • There is very rarely a reason to do CSS things with JS
  • CSS3 is even more powerful

Classes vs IDs

  • Do not use IDs in your CSS, they are far too specific
    • IDs should only be used for JS manipulation and page anchors
  • Use multiple classes, classes compound well and should be flexible
  • A class which is so specific it can only be used once is as useless as inline styling

Tips

  • Learn CSS selectors - they are the bread and butter of CSS
  • Use em, not px
  • Learn the display types, they are very helpful
  • Minimize selectors, the more concise and specific you can be the better
  • Learn the difference between margin and padding
    • Which affects width/height?
    • Which is colored with background-color?
  • Don't put everything in one stylesheet
  • text-transform can transform text (lowercase, uppercase, capitalize)
  • Try really hard not to use absolute positioning, it is almost never the answer

Responsiveness

Tables Are For Data

  • Do not use tables for anything other than data
  • Tables are not reponsive and are very fragile

Floating Divs

  • Use floating divs for columnar elements
  • clear: both; for content below

Breakpoints

  • Use breakpoints to trigger CSS overrides
  • Typtical breakpoints are 1200px, 992px, 768px

JS

  • JavaScript is very powerful, even without jQuery
  • Use JavaScript to do JavaScript things only
  • Pick up a JavaScript book, you won't regret it (JavaScript: The Good Parts)

Power of jQuery

  • jQuery and jQuery UI can do almost everything you want

Tips

There's a Plugin For That

  • Spend your time writing new code, not rewriting something someone else aready wrote
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment