stateofcss.yaml

# the survey outline
---

### TOOLS ###

# Answers:
# - I've never heard about it
# - I'd like to learn it
# - I'm not interested
# - I've used it and would use it again
# - I would not use it again

- title: Pre-/Post-processors
  description: Utilities that augment CSS. 
  template: tool
  id: preprocessors 
  questions:
    - SASS
    - LESS
    - PostCSS
    - Stylus
    # - No Pre-/Post-processor
    - Other|preprocessors_other
    - Rating|preprocessors_rating

- title: CSS Frameworks
  description: Libraries that give you pre-made components and styles.
  template: tool
  id: frameworks 
  questions:
    - Bootstrap
    - Material Design
    - Ant Design
    - Semantic UI
    - Bulma
    - Foundation
    - UIKit
    - Tachyons
    - PrimerCSS
    - Tailwind
    - PureCSS
    - Milligram
    - BassCSS
    # - No Framework
    - Other|frameworks_other
    - Rating|frameworks_rating

- title: CSS-in-JS
  description: Libraries that give you pre-made components and styles.
  template: tool
  id: cssinjs 
  questions:
    - Styled Components
    - Glamor
    - Aphrodite
    - JSS
    - Styled-JSX
    - Radium
    - Emotion
    - Other|cssinjs_other
    - Rating|cssinjs_rating

- title: Methodologies
  description: Codified ways to write cleaner CSS. 
  template: tool
  id: methodologies 
  questions:
    - BEM
    - Atomic CSS
    - OOCSS
    - SMACSS
    - IT CSS
    - Other|methodologies_other
    - Rating|methodologies_rating

### OTHER TOOLS ###

- title: Other Tools
  description: For these tools & technologies, just check the ones that you use regularly. 
  questions:
    - title: Text Editors
      description: Which text editor(s) do you regularly use?
      template: multiple
      allowmultiple: true
      allowother: true
      randomize: true
      options:
        - VS Code
        - Sublime Text
        - Atom
        - Vim
        - Emacs
        - Webstorm

### FEATURES ###

# Answers:
# - I've never heard about it
# - I've heard about it but not used it
# - I've experimented with it
# - I've used it in production
# - I try to avoid it

- title: Layout
  description: How do you position elements on the screen?
  template: feature
  questions:
    - CSS Grid
    - Flexbox
    - Floats (for layout)
    - Tables (for layout)
    - CSS Multi-Column
    - CSS Writing Modes

- title: Shapes & Graphics
  description: Controlling the shape and display of elements. 
  template: feature
  questions:
    - CSS Shapes
    - Object-fit
    - Clip-path
    - CSS Masks
    - Blend Modes
    - CSS Filter Effects

- title: Interactions
  description: Controlling how the user interacts with the page.
  template: feature
  questions: 
    - CSS Scroll Snap
    - Overscroll-behavior
    - Overflow-anchor

- title: Typography
  description: Setting and laying out text.
  template: feature
  questions: 
    - Web fonts (@font-face)
    - Variable fonts
    - Line breaking control
    - Font-variant-*
    - Initial-letter

- title: Animations & Transforms
  description: Animating and transforming elements.
  template: feature
  questions:
    - CSS Transitions
    - CSS Transforms
    - CSS Animations

- title: Units (fonts)
  description: Units for sizing text
  template: feature
  questions:
    - px
    - "%"
    - em
    - rem
    - vh, vw
    - vmin, vmax
    - ch
    - ex
    - pt

- title: Units (elements)
  description: Units for sizing and positioning non-text elements
  template: feature
  questions:
    - px
    - "%"
    - em
    - rem
    - vh, vw
    - vmin, vmax
    - ch
    - ex
    - pt

- title: Other Features
  description: Other CSS features.
  template: feature
  questions: 
    - CSS Variables
    - Feature Support Queries
    - CSS Containment
    - Will-change
    - calc()

### SELECTORS ###

- title: Selectors
  description: Which of these CSS selectors do you know about? 
  questions:
    - title: Selectors
      description: Which of these CSS selectors do you know about? 
      template: multiple
      allowmultiple: false
      allowother: false
      randomize: false
      options:
        - :not
        - :where
        - etc.
        - TODO

### CODING PATTERNS ###

- title: Coding Patterns
  description: How you write your CSS
  questions:
    - title: Selector Nesting
      description: How often do you use selector nesting? (.foo .bar ul li {...})
      template: multiple
      allowmultiple: false
      allowother: false
      randomize: false
      options:
        - Selector nesting should never be used
        - Selector nesting should be avoided if possible
        - Selector nesting is fine to use
        - Selector nesting should be encouraged
    - title: Naming
      description: What pattern do you follow for naming classes?
      template: multiple
      allowmultiple: false
      randomize: false
      options:
        - .my-class
        - .my_class
        - .MyClass
        - .myClass
    - title: IDs
      description: How often do you use ID selectors (#myDiv)?
      template: multiple
      allowmultiple: false
      randomize: false
      options:
        - ID selectors should never be used
        - ID selectors should be avoided if possible
        - ID selectors are fine to use
        - ID selectors use should be encouraged
    - title: "!important"
      description: How often do you use !important?
      template: multiple
      allowmultiple: false
      randomize: false
      options:
        - "!important" should never be used
        - "!important" should be avoided if possible
        - "!important" is fine to use
        - "!important" use should be encouraged

### ENVIRONMENTS ###

- title: Environments
  description: Which environments do you write CSS for?
  questions:

    - title: Browsers
      description: Which desktop browsers do you test in?
      template: multiple
      allowmultiple: true
      allowother: true
      randomize: true
      options:
        - Edge
        - Chrome
        - Safari
        - Firefox
        - Internet Explorer 8/9/10/11
        - Opera Mini

    - title: Mobile Platforms
      description: Which mobile platforms do you test on?
      template: multiple
      allowmultiple: true
      allowother: true
      randomize: true
      options:
        - iPhone
        - iPad
        - Android

    - title: Print Stylesheets
      description: Do you write print stylesheets?
      template: multiple
      allowmultiple: false
      allowother: false
      randomize: false
      options:
        - I never write print styles
        - I ocasionally write print styles
        - I add print styles to most of my projects
        - I use CSS for print-only projects

    - title: Email Clients
      description: Do you write CSS for email clients?
      template: multiple
      allowmultiple: false
      allowother: false
      randomize: false
      options:
        - I never write CSS for emails
        - I ocasionally write CSS for emails
        - I write CSS for emails for most of my projects
        - I write CSS for email-only projects

### RESOURCES ###

- title: Resources
  description: What CSS resources do you consult?
  questions:
    - title: Sites
      description: Which CSS-related blogs/magazines/etc. do you read?
      template: multiple
      allowmultiple: true
      allowother: true
      randomize: false
      options:
        - CSS Tricks
        - Smashing Magazine
        - A List Apart
        - CoDrops
        - SitePoint
        - Stack Overflow
        - MDN
        - W3Schools
        - The CSS Spec

    - title: Podcasts
      description: Which CSS or programming-related podcasts do you listen to?
      template: multiple
      allowmultiple: true
      allowother: true
      randomize: false
      options:
        - Shop Talk Show
        - Style Guide Podcast
        - The Big Web Show
        - The Web Ahead
        - Non Breaking Space Show
        - The Changelog

### OPINIONS ###

- title: Opinion Questions
  description: How do you feel about the state of CSS?
  questions:
    - title: CSS is easy to learn
      template: opinion
    - title: CSS is evolving too slowly
      template: opinion
    - title: Non-semantic classes (.center, .large-text, etc.) should be avoided
      template: opinion
    - title: Selector nesting (.foo .bar ul li {...}) should be avoided
      template: opinion
    - title: CSS is a programming language
      template: opinion
    - title: I enjoy writing CSS
      template: opinion
    - title: CSS is moving in the right direction
      template: opinion
    - title: What do you feel is currently missing from CSS?
      description: Features you'd like to see in CSS one day. 
      template: longtext

### DEMOGRAPHICS ###

- title: About You
  description: Let's get to know the real you.
  questions:
    - title: Years of Experience
      description: How long you've been writing CSS.
      template: multiple
      allowmultiple: false
      allowother: false
      randomize: false
      options:
        - Less than one year
        - 1-2 years
        - 2-5 years
        - 5-10 years
        - 10-20 years
        - 20+ years
    - title: Job Title
      description: How do you introduce yourself at parties?
      template: multiple
      allowmultiple: false
      allowother: true
      randomize: false
      options:
        - Front-end Developer
        - Full-stack Developer
        - Back-end Developer
        - Designer
    - title: Company Size
      template: multiple
      allowmultiple: false
      allowother: false
      randomize: false
      options:
        - Just me
        - 1-5 people
        - 5-10 people
        - 10-20 people
        - 20-50 people
        - 50-100 people
        - 100-1000 people
        - 1000+ people
    - title: Yearly Salary
      description: In USD
      template: multiple
      allowmultiple: false
      allowother: false
      randomize: false
      options: 
        - I work for free :(
        - $0-$10k
        - $10k-$30k
        - $30k-$50k
        - $50k-$100k
        - $100k-$200k
        - $200k+
    - title: How did you find out about this survey?
      template: text
    - title: Your Gender
      template: multiple
      allowmultiple: false
      options: 
        - Female
        - Male
        - Non-binary/ third gender
        - Prefer not to say
    - title: Your Email
      description: If you'd like to be notified when survey results are available. Your email won't be used for any other purpose.
      template: email
    - title: Your Country
      template: text
    - title: Your City
      template: text
    - title: Other Comments
      description: Things we missed, feedback on the survey, your favorite color, etc.
      template: longtext