Skip to content

Instantly share code, notes, and snippets.

@clindsey
Last active July 15, 2016 02:27
Show Gist options
  • Select an option

  • Save clindsey/9b7138bc9b460023cfbc to your computer and use it in GitHub Desktop.

Select an option

Save clindsey/9b7138bc9b460023cfbc to your computer and use it in GitHub Desktop.

CSS recommended reading

CSS is a crazy person, it belongs in a dungeon.

Development

πŸ‘ ITCSS - settings, tools, generic, base, objects, components, trumps

Styleguide Driven Development - a practice that encourages the separation of UX, Design & Frontend from Backend concerns

Best practices

Naming CSS Stuff is Really Hard - CSS naming conventions

Dangers of Inheritance - CSS Inheritance and Our Misuse of the Cascade

CSS Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS (I don't agree with many of these)

multiple classes vs @extend - multiple classes is ok, but restrict yourself to a single modifier class and a single state class or state data attribute per element

πŸ‘ CSS and #noparents - Independence is important.

πŸ‘ Stop the cascade - The value of isolation.

πŸ‘ Scope CSS classes with prefixes - Better than chaining.

CSS property order - Easily visualize an element by it's markup.

Write less Less - Nesting is a slippery slope.

The problem with nesting CSS with Less or Sass - "CSS is most effective when it is just specific enough, but doesn't overdo it."

An update on Less.js & nesting your CSS - Use LESS's & selector.

GitHub's CSS - how github does their css.

12 Common CSS Mistakes - some important stuff

Reference

css3 matricies - very well done explanation of css matrix transforms

πŸ‘ CSS Triggers... - great reference for explaining selectors and their effects, like layout/paint/composite.

πŸ‘ CSS Almanac - best place to find info about css selectors and properties

WTF, HTML and CSS? - "A curated list of commonly frustrating HTML and CSS quandries, miscues, and dilemmas."

πŸ‘ Easy-to-Forget Selectors - body > p h1 + p h1 ~ pre

Code Styling Guides

Code Guide by @mdo - "Standards for developing flexible, durable, and sustainable HTML and CSS."

necolas/idomatic-css - "Princicples of writing consistent, idomatic CSS."

github.com/styleguide - GitHub's code styling guides for CSS, JavaScript and Ruby.

CSS commenting strategy - A suggestion for commenting CSS files.

Bootstrap

Bootstrap 3 Less Workflow - Use bootstrap in your project and customize extensively.

Bootstrap Customization Best Practices - Another explanation of how to use Bootstrap without precluding the project from updates.

Bootstrap sub-theming - "You will not need to touch these files again. This allows the framework to be updated in the future."

Bootstrap 3 tip and tricks - examples of patterns

Understanding the Bootstrap 3 Grid System - answers some questions about heirarchy of rows and columns

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment