Software DeveloperProgrammingWriting CodeDevelopment EnvironmentSource ControlDebuggingCode QualityRefactoringDesign PrinciplesDesign PatternsProgramming FundamentalsAPILanguagesDSLsRecursionComputer ScienceApplications of CSMachine LearningComputer NetworkingOperating SystemsComputer EngineeringRoboticsCS TheoryData StructuresDatabase SystemsComputational ComplexityInformation TheoryCryptographyCompressionWeb DevelopmentThe InternetTCPIPHTTPHostingCDNServerAJAXFrontendMaking WebsitesMaking Web AppsRESTSEOHTMLCSSCSS PreprocessorsCSS FrameworksCSS MethodologiesCSS ResetCMSSSGWeb DesignResponsive DesignVisual DesignUX DesignJavascriptDOMES6JQueryMVCBackendServer StackDev OpsCloud

CSS Frameworks

What it is

CSS Frameworks are bundles of prewritten CSS code that provide useful tools and shortcuts to make CSS faster and easier to write. Features vary, but these often include:

  • A CSS reset
  • A grid system for quickly creating layouts with responsive design.
  • preset styles for typography, spacing, and widgets like buttons and navigation menus
  • Sets of icons
  • CSS helper classes like “hide” or “left"
  • widgets like modals and dropdowns, often with an accompanying Javascript library

Many modern libraries also add support for CSS preprocessors like SASS, LESS and Stylus.

There are many, many competing CSS frameworks, that differ in both their look and approach. The biggest names at the moment (11/17) are Twitter Bootstrap, Semantic UI and Foundation. Personally, I find Tachyons interesting for their DRY approach.

Some CSS libraries only fulfill one of the above features, like the popular 960 grid system.

Why it matters

CSS libraries are massively popular because many developers hate wasting time writing CSS. Frameworks let you quickly mock up an app that will look reasonably good without running into the inevitable oddities and frustration of working with CSS. In theory, anyway.

The downside is that CSS libraries add bloat and slow down page load times, and cause your site to look the same as every other site using the framework. You know that bootstrap look.

Plus, adopting a CSS library can cause you pain down the road if you ever want to get rid of it: some compare using bootstrap to taking out a mortgage. Worse, many developers use CSS frameworks as a crutch that prevents them from needing to really understand CSS, leading to sloppy and broken code.

There’s a time and a place where CSS libraries make sense, but make sure you know CSS before you start relying on them.

How to learn it

First, take the time to truly understand CSS. Then, do some research and pick a framework that you like. Often, the best way to learn to use it is by reading the official documentation. Alternatively, there are tutorials and classes out there for the most popular frameworks, such as: