Cory Rylan

My name is , Software Developer and Speaker. Building Design Systems and Web Components.

Follow @coryrylan
CSS

Web Con, University of Illinois Conference Notes Part 1.

By Cory Rylan

- 1 minute

Updated

Here are my notes from University of Illinois Web Con 2014. These are from the talk
"Life without a BS Foundation"
by Kianosh Pourian.

"Build a framework around your design not design around your framework."

Cons for using front end frameworks such as Twitter Bootstrap and Zurb Foundation:

  • Not semantic
  • Naming conventions not established/documented poorly
  • Performance issues (bloat)
  • Little to no file structure especially Sass project for Bootstrap
  • Difficult to update
  • Design implementation frameworks fall short
  • Does not follow the DRY principals
  • Overriding is very difficult and tons of extra code and uses little of the framework
  • Editing the framework breaks any update
  • Impossible to create a framework for everyone
  • CSS is old and part of the issue
  • Spend a lot of time learning someone else's code
  • Not ideal for enterprise or large applications
"When building a site or web application, one must build it for success. Success means that small projects will evolve into large projects.

What to do:

  • "Do the sh*t yourself"
  • Write your own CSS
  • Create Style Guides
  • Use Sass or a preprocessor
  • Follow OOCSS Principals
  • Atomic Design
  • Organize your code in modules in folders (each folder is a atom or module)
  • The global import file should have comment of what the modules are being imported for
  • Have a unified naming convention
  • Folders helps packages modules for individual consumption
  • Learn from frameworks such as Twitter Bootstrap and Zurb Foundation
Bluesky Facebook LinkedIn Email
 

Related Posts

CSS

Thoughts On Large Mobile First Responsive Project

Some of my thoughts on working on a large mobile first responsive design project.

Read Article
Cory Rylan Blog

ASP MVC Critical CSS Performance

ASP MVC Critical CSS Performance. Learn how to improve CSS and HTML render time in the browser.

Read Article
CSS

CSS BEM Syntax Basics

A beginner tutorial on the CSS BEM naming syntax and how it can improve your CSS architecture.

Read Article