state_of_css.yml

locale: vi-VN
namespace: css
translations:
  ###########################################################################
  # General
  ###########################################################################

  - key: general.state_of_css.intro
    t: |
      CSS is evolving faster than ever.

      Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS.

      This is where the State of CSS survey comes in: we're taking on the world of styles and selectors to try and identify upcoming trends, and figure out what features and tools to learn next!

  - key: general.state_of_css.description
    t: The annual developer survey about the latest trends in CSS

  ###########################################################################
  # Sections
  ###########################################################################

  - key: sections.layout.title
    t: Layout
  - key: sections.layout.description
    t: How do you position elements on the screen?

  - key: sections.shapes_graphics.title
    t: Shapes & Graphics
  - key: sections.shapes_graphics.description
    t: Controlling the shape and display of elements.

  - key: sections.interactions.title
    t: Interactions
  - key: sections.interactions.description
    t: Controlling how the user interacts with the page.

  - key: sections.typography.title
    t: Typography
  - key: sections.typography.description
    t: Setting and laying out text.

  - key: sections.animations_transforms.title
    t: Animations & Transforms
  - key: sections.animations_transforms.description
    t: Animating and transforming elements.

  - key: sections.accessibility.title
    t: Accessibility
  - key: sections.accessibility.description
    t: Accessibility features and techniques.

  - key: sections.media_queries.title
    t: Media Queries
  - key: sections.media_queries.description
    t: Ways of adapting your site to the user's device or preferences.

  - key: sections.selectors.title
    t: Selectors
  - key: sections.selectors.description
    t: CSS selectors.

  - key: sections.colors.title
    t: Colors
  - key: sections.colors.description
    t: Color-related features.

  - key: sections.javascript_apis.title
    t: JavaScript APIs
  - key: sections.javascript_apis.description
    t: JavaScript APIs used to control or complement CSS.

  - key: sections.other_features.title
    t: Other Features
  - key: sections.other_features.description
    t: Other CSS features.

  - key: sections.units_selectors.title
    t: Units & Selectors
  - key: sections.units_selectors.description
    t: Test your knowledge of CSS units and selectors.

  - key: sections.pre_post_processors.title
    t: Pre-/Post-processors
  - key: sections.pre_post_processors.description
    t: Utilities that augment CSS.

  - key: sections.pre_post_processors_others.title
    t: Other Pre-/Post-processors

  - key: sections.css_frameworks.title
    t: CSS Frameworks
  - key: sections.css_frameworks.description
    t: Frameworks and libraries that give you pre-made components or styles.

  - key: sections.css_frameworks_others.title
    t: Other CSS Frameworks

  - key: sections.css_methodologies.title
    t: CSS Methodologies
  - key: sections.css_methodologies.description
    t: Codified ways to write cleaner CSS.

  - key: sections.css_methodologies_others.title
    t: Other CSS Methodologies.

  - key: sections.css_in_js.title
    t: CSS-in-JS
  - key: sections.css_in_js.description
    t: Libraries that help integrate CSS into JavaScript code.

  - key: sections.css_in_js_others.title
    t: Other CSS-in-JS Libraries.

  - key: sections.tools_others.title
    t: Other Tools
  - key: sections.tools_others.description
    t: Other CSS tools.

  - key: sections.environments.title
    t: Environments
  - key: sections.environments.description
    t: Which environments and accessibility concerns do you consider when writing CSS?

  - key: sections.usage_css.title
    t: CSS Usage
  - key: sections.usage_css.description
    t: How you use CSS.

  - key: sections.resources_css.title
    t: Resources
  - key: sections.resources_css.description
    t: What CSS resources do you consult?

  ###########################################################################
  # Options
  ###########################################################################

  # CSS for print
  - key: options.css_for_print.0
    t: I (almost) never write print styles
  - key: options.css_for_print.0.short
    t: Never

  - key: options.css_for_print.1
    t: I occasionally write print styles
  - key: options.css_for_print.1.short
    t: Occasionally

  - key: options.css_for_print.2
    t: I write print styles as part of most projects
  - key: options.css_for_print.2.short
    t: Often

  - key: options.css_for_print.3
    t: I focus mainly on CSS for print
  - key: options.css_for_print.3.short
    t: Mainly

  # CSS for email
  - key: options.css_for_email.0
    t: I (almost) never write CSS for email clients
  - key: options.css_for_email.0.short
    t: Never

  - key: options.css_for_email.1
    t: I occasionally write CSS for email clients
  - key: options.css_for_email.1.short
    t: Occasionally

  - key: options.css_for_email.2
    t: I write CSS for email clients as part of most projects
  - key: options.css_for_email.2.short
    t: Often

  - key: options.css_for_email.3
    t: I focus mainly on CSS for email clients
  - key: options.css_for_email.3.short
    t: Mainly

  # what do you use CSS for?
  - key: options.what_do_you_use_css_for.marketing_sites
    t: Marketing sites & landing pages
  - key: options.what_do_you_use_css_for.design_systems
    t: Design systems
  - key: options.what_do_you_use_css_for.blogs
    t: Blogs or other text-heavy sites
  - key: options.what_do_you_use_css_for.web_apps
    t: Web apps
  - key: options.what_do_you_use_css_for.mobile_apps
    t: Mobile apps
  - key: options.what_do_you_use_css_for.css_art
    t: CSS art & illustrations
  - key: options.what_do_you_use_css_for.emails
    t: Emails
  - key: options.what_do_you_use_css_for.printed_documents
    t: Printed documents
  - key: options.what_do_you_use_css_for.desktop_apps
    t: Desktop apps

  - key: options.what_do_you_use_css_for.e_commerce
    t: E-commerce
  - key: options.what_do_you_use_css_for.websites
    t: Websites
  - key: options.what_do_you_use_css_for.games
    t: Games
  - key: options.what_do_you_use_css_for.portfolio
    t: Portfolio
  - key: options.what_do_you_use_css_for.extensions
    t: Browser Extensions
  - key: options.what_do_you_use_css_for.desktop
    t: Desktop

  # CSS pain points
  - key: options.css_pain_points.browser_interoperability
    t: Browser Compatibility
  - key: options.css_pain_points.browser_interoperability.description
    t: Differences between Chrome, Safari, Firefox, etc.
  - key: options.css_pain_points.interactions
    t: Interactions
  - key: options.css_pain_points.interactions.description
    t: Responding to user input or other events (scroll, hover, etc.).
  - key: options.css_pain_points.architecture
    t: Architecture & Maintenance
  - key: options.css_pain_points.architecture.description
    t: File organization, dead code elimination, refactoring, etc.
  - key: options.css_pain_points.layout_positioning
    t: Layout & Positioning
  - key: options.css_pain_points.layout_positioning.description
    t: Setting up layouts and making sure elements go where you want them to.
  - key: options.css_pain_points.scoping_specificity
    t: Scoping & Specificity
  - key: options.css_pain_points.scoping_specificity.description
    t: Dealing with the cascade, overriding styles, etc.
  - key: options.css_pain_points.responsive_design
    t: Responsive Design
  - key: options.css_pain_points.responsive_design.description
    t: Adapting layouts and designs for different form factors.
  - key: options.css_pain_points.form_elements_styling
    t: Form Elements Styling
  - key: options.css_pain_points.form_elements_styling.description
    t: Customizing how form elements look and behave.
  - key: options.css_pain_points.performance_issues
    t: Performance Issues
  - key: options.css_pain_points.performance_issues.description
    t: Dealing with scrolling jank, making animations smoother, etc.

  # CSS missing features (same as features section)
  - key: options.css_missing_features.nesting
    t: Nesting
  - key: options.css_missing_features.nesting.description
    t: Being able to nest styles in native CSS.
  - key: options.css_missing_features.parent_selector
    t: Parent Selector
  - key: options.css_missing_features.parent_selector.description
    t: The ability to target a parent element based on its children.
  - key: options.css_missing_features.browser_support
    t: Browser Support
  - key: options.css_missing_features.browser_support.description
    t: Better browser support for existing features.
  - key: options.css_missing_features.mixins
    t: Mixins
  - key: options.css_missing_features.mixins.description
    t: Group and reuse definitions dynamically.
  - key: options.css_missing_features.color_functions
    aliasFor: features.color_functions
  - key: options.css_missing_features.color_functions.description
    aliasFor: features.color_functions.description
  - key: options.css_missing_features.container_queries
    t: Container Queries
  - key: options.css_missing_features.container_queries.description
    t: Being able to write styles based on the parent container's dimensions.
  - key: options.css_missing_features.scoping
    t: Scoping
  - key: options.css_missing_features.scoping.description
    t: The ability to be more specific about where your styles are applied.
  - key: options.css_missing_features.subgrid
    t: Subgrid
  - key: options.css_missing_features.subgrid.description
    t: Nesting deeper-level subgrids into a parent grid.

  - key: options.css_missing_features.native_visually_hidden
    t: Visually Hidden Content
  - key: options.css_missing_features.native_visually_hidden.description
    t: Native support for visually hidden content.

  - key: options.css_missing_features.generated_content_alt_text
    t: Generated Content Alt Text
  - key: options.css_missing_features.generated_content_alt_text.description
    t: Add alt text to generated (`::before`, `::after`) content.

  - key: options.css_missing_features.animate_to_auto
    t: Animate to `auto`
  - key: options.css_missing_features.animate_to_auto.description
    t: Animate an element's dimension to `auto`.

  - key: options.css_missing_features.anchored_positioning
    t: Anchored Positioning
  - key: options.css_missing_features.anchored_positioning.description
    t: Positioning elements relative to the edges of any arbitrary other element.

  - key: options.css_missing_features.wrapping_detection
    t: Wrapping Detection
  - key: options.css_missing_features.wrapping_detection.description
    t: Detecting when a flex or grid item has wrapped to another line.

  - key: options.css_missing_features.more_pseudo_elements
    t: More Pseudo-Elements
  - key: options.css_missing_features.more_pseudo_elements.description
    t: Having more than two pseudo-elements per element.

  - key: options.css_missing_features.svg_in_css
    t: SVG-in-CSS
  - key: options.css_missing_features.svg_in_css.description
    t: Support for SVG syntax inside CSS code (such as `background`).

  - key: options.css_missing_features.grid_lines_styling
    t: Grid-lines Styling
  - key: options.css_missing_features.grid_lines_styling.description
    t: The ability to style the invisible lines that divide a grid.

  - key: options.css_missing_features.media_queries_variables
    t: Media Queries Variables
  - key: options.css_missing_features.media_queries_variables.description
    t: Being able to use variables inside media queries.

  - key: options.css_missing_features.masonry_layout
    t: Masonry Layout
  - key: options.css_missing_features.masonry_layout.description
    t: Native support for Pinterest-style free-flowing grid layouts.

  - key: options.css_missing_features.css_toggle
    t: CSS Toggle
  - key: options.css_missing_features.css_toggle.description
    t: A way to associate a "toggleable value" with an element

  ###########################################################################
  # Features
  ###########################################################################

  # layout

  - key: features.regions
    t: CSS Regions
  - key: features.multi_column
    t: CSS Multi-Column
  - key: features.writing_modes
    t: CSS Writing Modes
  - key: features.exclusions
    t: CSS Exclusions

  - key: features.flexbox_gap
    t: "`gap` property for flexbox"

  - key: features.viewport_percentage_length_units
    t: Small, Large, and Dynamic Viewport Units
  - key: features.at_container
    t: "`@container` Queries"
  - key: features.at_container.description
    t: Including size and style queries

  # shapes & graphics
  - key: features.shapes
    t: CSS Shapes
  - key: features.masks
    t: CSS Masks
  - key: features.filter_effects
    t: CSS Filter Effects

  - key: features.linear_easing_function
    t: "`linear()` Easing Function"
  - key: features.blend_modes
    t: Blend Modes
  - key: features.intrinsic_sizing
    t: Intrinsinc Sizing Keywords
  - key: features.gradient_color_spaces
    t: Interpolation Color Spaces

  # typography
  - key: features.web_fonts
    t: Web Fonts (`@font-face`)
  - key: features.variable_fonts
    t: Variable Fonts
  - key: features.line_breaking
    t: Line-Breaking Properties
  - key: features.direction.description
    t: Also includes `dir` HTML attribute.

  # animations & transforms
  - key: features.transitions
    t: CSS Transitions
  - key: features.transforms
    t: CSS Transforms
  - key: features.animations
    t: CSS Animations

  # media queries/accessibility
  - key: features.tabindex
    t: "`tabindex` HTML attribute"

  - key: features.aria_attributes
    t: ARIA HTML Attributes
  - key: features.aria_attributes.description
    t: "`role`, `aria-label`, etc."

  # other features
  - key: features.variables
    t: CSS Variables (Custom Properties)
  - key: features.containment
    t: CSS Containment

  - key: features.css_nesting.description
    t: Native CSS nesting, excluding pre- or post-processors.

  - key: features.trigonometric_functions
    t: Trigonometric Functions
  - key: features.exponential_functions
    t: Exponential Functions
  - key: features.sign_related_functions
    t: Sign-Related Functions
  - key: features.stepped_value_functions
    t: Stepped Value Functions
  - key: features.css_nesting
    t: CSS Nesting
  - key: features.shadow_dom_css
    t: Shadow DOM Features
  - key: features.individual_transform_properties
    t: Individual Transform Properties
  - key: features.comparison_functions
    t: CSS Comparison Functions
  - key: features.math_functions
    t: CSS Math Functions
  - key: features.viewport_units
    t: Viewport Units (`vh`, `vw`)
  - key: features.cascade_layers
    t: Cascade Layers

  # missing features (see also options)
  - key: features.nesting
    t: Nesting
  - key: features.nesting.description
    t: Being able to nest styles in native CSS.
  - key: features.parent_selector
    t: Parent Selector
  - key: features.parent_selector.description
    t: The ability to target a parent element based on its children.
  - key: features.browser_support
    t: Browser Support
  - key: features.browser_support.description
    t: Better browser support for existing features.
  - key: features.mixins
    t: Mixins
  - key: features.mixins.description
    t: Group and reuse definitions dynamically.
  - key: features.color_functions
    t: Color Functions
  - key: features.color_functions.description
    t: Functions for manipulating color values (`color()`, `color-mix()`, `contrast-color()`…).
  - key: features.container_queries
    t: Container Queries
  - key: features.container_queries.description
    t: Being able to write styles based on the parent container's dimensions.
  - key: features.scoping
    t: Scoping
  - key: features.scoping.description
    t: The ability to be more specific about where your styles are applied.

  ###########################################################################
  # Units & Selectors
  ###########################################################################

  - key: features_others.units
    t: Units
  - key: features_others.units.description
    t: Which of these CSS units have you used?

  - key: options.units.px
    t: px
  - key: options.units.pt
    t: pt
  - key: options.units.percent
    t: "%"
  - key: options.units.em
    t: em
  - key: options.units.rem
    t: rem
  - key: options.units.vh_vw
    t: vh, vw
  - key: options.units.vmin_vmax
    t: vmin, vmax
  - key: options.units.ch
    t: ch
  - key: options.units.ex
    t: ex
  - key: options.units.mm
    t: mm
  - key: options.units.cm
    t: cm
  - key: options.units.in
    t: in

  - key: features_others.pseudo_elements
    t: Pseudo Elements
  - key: features_others.pseudo_elements.description
    t: Which of these CSS pseudo-elements have you used?

  - key: options.pseudo_elements.before
    t: "::before"
  - key: options.pseudo_elements.after
    t: "::after"
  - key: options.pseudo_elements.first_line
    t: "::first-line"
  - key: options.pseudo_elements.first_letter
    t: "::first-letter"
  - key: options.pseudo_elements.selection
    t: "::selection"
  - key: options.pseudo_elements.placeholder
    t: "::placeholder"
  - key: options.pseudo_elements.marker
    t: "::marker"
  - key: options.pseudo_elements.backdrop
    t: "::backdrop"

  - key: features_others.combinators
    t: Combinators
  - key: features_others.combinators.description
    t: Which of these combinations CSS selectors have you used?

  - key: options.combinators.descendant
    t: div span (descendant)
  - key: options.combinators.child
    t: div > span (child)
  - key: options.combinators.next_sibling
    t: div + div (next sibling)
  - key: options.combinators.subsequent_sibling
    t: div ~ div (subsequent sibling)

  - key: features_others.tree_document_structure
    t: Tree / Document Structure
  - key: features_others.tree_document_structure.description
    t: Which of these structure related CSS selectors have you used?

  - key: options.tree_document_structure.root
    t: :root
  - key: options.tree_document_structure.empty
    t: :empty
  - key: options.tree_document_structure.not
    t: :not()
  - key: options.tree_document_structure.nth_child
    t: :nth-child()
  - key: options.tree_document_structure.nth_last_child
    t: :nth-last-child()
  - key: options.tree_document_structure.first_child
    t: :first-child
  - key: options.tree_document_structure.last_child
    t: :last-child
  - key: options.tree_document_structure.only_child
    t: :only-child
  - key: options.tree_document_structure.nth_of_type
    t: :nth-of-type()
  - key: options.tree_document_structure.nth_last_of_type
    t: :nth-last-of-type()
  - key: options.tree_document_structure.first_of_type
    t: :first-of-type
  - key: options.tree_document_structure.last_of_type
    t: :last-of-type
  - key: options.tree_document_structure.only_of_type
    t: :only-of-type
  - key: options.tree_document_structure.lang
    t: :lang()
  - key: options.tree_document_structure.is
    t: :is()
  - key: options.tree_document_structure.where
    t: :where()
  - key: options.tree_document_structure.has
    t: :has()

  - key: features_others.attributes
    t: Attributes
  - key: features_others.attributes.description
    t: Which of these CSS attributes selectors have you used?

  - key: options.attributes.presence
    t: div[foo] (Presence)
  - key: options.attributes.equality
    t: div[foo="bar"] (Equality)
  - key: options.attributes.starts_with
    t: div[foo^="bar"] (Starts with)
  - key: options.attributes.ends_with
    t: div[foo$="bar"] (Ends with)
  - key: options.attributes.contains_word
    t: div[foo~="bar"] (Contains word)
  - key: options.attributes.contains_substring
    t: div[foo*="bar"] (Contains substring)

  - key: features_others.links_urls
    t: Links/URLs
  - key: features_others.links_urls.description
    t: Which of these links & URLs related CSS selectors have you used?

  - key: options.links_urls.any_link
    t: :any-link
  - key: options.links_urls.link_visited
    t: :link and :visited
  - key: options.links_urls.local_link
    t: :local-link
  - key: options.links_urls.target
    t: :target

  - key: features_others.interaction
    t: Interaction
  - key: features_others.interaction.description
    t: Which of these interaction CSS selectors have you used?

  - key: options.interaction.hover
    t: :hover
  - key: options.interaction.active
    t: :active
  - key: options.interaction.focus
    t: :focus
  - key: options.interaction.focus_within
    t: :focus-within
  - key: options.interaction.focus_visible
    t: :focus-visible

  - key: features_others.form_controls
    t: Form Controls
  - key: features_others.form_controls.description
    t: Which of these form related CSS selectors have you used?

  - key: options.form_controls.enabled_disabled
    t: :enabled and :disabled
  - key: options.form_controls.read_only_write
    t: :read-only and :read-write
  - key: options.form_controls.placeholder_shown
    t: :placeholder-shown
  - key: options.form_controls.default
    t: :default
  - key: options.form_controls.checked
    t: :checked
  - key: options.form_controls.indeterminate
    t: :indeterminate
  - key: options.form_controls.valid_invalid
    t: :valid and :invalid
  - key: options.form_controls.user_invalid
    t: :user-invalid
  - key: options.form_controls.in_out_range
    t: :in-range and :out-of-range
  - key: options.form_controls.required_optional
    t: :required and :optional

  # slider
  - key: options.css_js_balance.0
    t: 100% CSS
  - key: options.css_js_balance.4
    t: 50%–50%
  - key: options.css_js_balance.8
    t: 100% JS

  ###########################################################################
  # Other Tools
  ###########################################################################

  - key: tools_others.pre_post_processors
    aliasFor: sections.pre_post_processors.title
  - key: other_tools.pre_post_processors
    aliasFor: sections.pre_post_processors.title
  - key: tools_others.pre_post_processors.question
    t: Which pre- or post-processors do you regularly use?
  - key: other_tools.pre_post_processors.description
    aliasFor: tools_others.pre_post_processors.question
  - key: tools_others.pre_post_processors.others
    aliasFor: sections.pre_post_processors_others.title
  - key: other_tools.pre_post_processors.others
    aliasFor: sections.pre_post_processors_others.title
  - key: other_tools.pre_post_processors_freeform
    aliasFor: sections.pre_post_processors_others.title
  - key: options.pre_post_processors.na
    t: None

  - key: tools_others.utilities
    t: Utilities
  - key: tools_others.utilities.question
    t: Which utilities or tools do you regularly use?
  - key: tools_others.utilities.others
    t: Other Utilities
  - key: tools_others.utilities.others.description
    t: Other utilities (freeform field).
  - key: options.utilities.na
    t: None

  - key: other_tools.utilities
    aliasFor: tools_others.utilities
  - key: other_tools.utilities.description
    aliasFor: tools_others.utilities.question
  - key: other_tools.utilities.others
    aliasFor: tools_others.utilities.others
  - key: other_tools.utilities.others.description
    aliasFor: tools_others.utilities.others.description
  - key: other_tools.utilities_freeform
    aliasFor: tools_others.utilities.others

  - key: tools_others.browsers
    t: Browsers
  - key: tools_others.browsers.question
    t: Which browser(s) do you primarily work in during initial development?
  - key: tools_others.browsers.others
    t: Other Browsers
  - key: tools_others.browsers.others.description
    t: Other answers (freeform field).

  - key: other_tools.browsers
    aliasFor: tools_others.browsers
  - key: other_tools.browsers.description
    aliasFor: tools_others.browsers.question
  - key: other_tools.browsers.others
    aliasFor: tools_others.browsers.others
  - key: other_tools.browsers.others.description
    aliasFor: tools_others.browsers.others.description

  ###########################################################################
  # Environments
  ###########################################################################

  - key: environments.browsers
    t: Browsers
  - key: environments.browsers.description
    t: Which browsers do you test in?

  - key: environments.form_factors
    t: Testing Environments
  - key: environments.form_factors.question
    t: Which form factors or environments do you test on?
  - key: environments.form_factors.others
    t: Other Testing Environments
  - key: environments.form_factors.others.description
    t: Other form factors or environments you usually test on.

  - key: usage.form_factors
    aliasFor: environments.form_factors
  - key: usage.form_factors.question
    aliasFor: environments.form_factors.question
  - key: usage.form_factors.others
    aliasFor: environments.form_factors.others
  - key: usage.form_factors_freeform
    aliasFor: environments.form_factors.others
  - key: usage.form_factors.others.description
    aliasFor: environments.form_factors.others.description

  - key: environments.accessibility_features
    t: Accessibility Features
  - key: environments.accessibility_features.question
    t: Which accessibility features do you usually implement?
  - key: environments.accessibility_features.others
    t: Other Accessibility Features
  - key: environments.accessibility_features.others.description
    t: Other accessibility features you usually implement

  - key: environments.css_for_print
    t: CSS for Print
  - key: environments.css_for_print.question
    t: Do you write print styles?

  - key: environments.css_for_email
    t: CSS for Email Clients
  - key: environments.css_for_email.question
    t: Do you write CSS for email clients?

  - key: environments.what_do_you_use_css_for
    t: What do you mainly use CSS for?
  - key: environments.what_do_you_use_css_for.question
    t: What kind of project do you usually use CSS for?
  - key: environments.what_do_you_use_css_for.others
    t: Other kinds of projects

  - key: usage.what_do_you_use_css_for
    aliasFor: environments.what_do_you_use_css_for
  - key: usage.what_do_you_use_css_for.question
    aliasFor: environments.what_do_you_use_css_for.question
  - key: usage.what_do_you_use_css_for.others
    aliasFor: environments.what_do_you_use_css_for.others
  - key: usage.what_do_you_use_css_for_freeform
    aliasFor: environments.what_do_you_use_css_for.others

  - key: charts.axis_legends.css_for_print
    t: Frequency
  - key: charts.axis_legends.css_for_email
    t: Frequency

  - key: tools_others.tool_evaluation
    t: Library Evaluation
  - key: tools_others.tool_evaluation.description
    t: For each matchup, pick the factor you prioritize when evaluating a new library.

  ###########################################################################
  # Opinions
  ###########################################################################

  - key: opinions.css_easy_to_learn
    t: CSS is easy to learn
  - key: opinions.css_easy_to_learn.title
    t: Learning Curve

  - key: opinions.css_evolving_slowly
    t: CSS is evolving too slowly
  - key: opinions.css_evolving_slowly.title
    t: Rate of Change

  - key: opinions.utility_classes_to_be_avoided
    t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided
  - key: opinions.utility_classes_to_be_avoided.title
    t: Non-Semantic Classes

  - key: opinions.selector_nesting_to_be_avoided
    t: Selector nesting (.foo .bar ul li {...}) should be avoided
  - key: opinions.selector_nesting_to_be_avoided.title
    t: Selector Nesting

  - key: opinions.css_is_programming_language
    t: CSS is a programming language
  - key: opinions.css_is_programming_language.title
    t: Programming Language

  - key: opinions.enjoy_writing_css
    t: I enjoy writing CSS
  - key: opinions.enjoy_writing_css.title
    t: Enjoyment

  # Browser interoperability question
  - key: opinions_others.browser_interoperability_features.others
    t: Browser Incompatibilities
  - key: opinions_others.browser_interoperability_features.others.description
    t: >
      Are there any existing CSS features that you have difficulties using (or avoid altogether)
      because of lack of support, or differences between browsers?

  - key: usage.css_interoperability_features
    aliasFor: opinions_others.browser_interoperability_features.others
  - key: usage.css_interoperability_features.question
    aliasFor: opinions_others.browser_interoperability_features.others.description

  - key: usage.css_interoperability_features_freeform
    aliasFor: opinions_others.browser_interoperability_features.others
  - key: usage.interoperability_features_freeform
    aliasFor: opinions_others.browser_interoperability_features.others
  - key: usage.interoperability_features_freeform.others
    aliasFor: opinions_others.browser_interoperability_features.others

  - key: usage.interoperability_features_freeform.description
    aliasFor: opinions_others.browser_interoperability_features.others.description
  - key: usage.interoperability_features_freeform.others.description
    aliasFor: opinions_others.browser_interoperability_features.others.description

  - key: options.css_interoperability_features.math_functions
    aliasFor: features.math_functions
  - key: options.css_interoperability_features.css_nesting
    aliasFor: features.css_nesting
  - key: options.css_interoperability_features.at_container
    aliasFor: features.at_container

  - key: options.css_interoperability_features.color_functions
    aliasFor: features.color_functions
  - key: options.css_interoperability_features.color_functions.description
    aliasFor: features.color_functions.description
  - key: options.css_interoperability_features.cascade_layers
    aliasFor: features.cascade_layers

  - key: options.css_interoperability_features.na
    t: None

  # Pain Points
  - key: opinions.css_pain_points
    t: CSS Pain Points
  - key: opinions.css_pain_points.description
    t: For each matchup, pick the aspect of CSS you struggle with the most.

  - key: usage.other_pain_points_freeform
    t: Any other pain points related to writing CSS?
  - key: usage.other_pain_points_freeform.others
    aliasFor: usage.other_pain_points_freeform

  - key: opinions_others.css_pain_points.others
    t: Other CSS Pain Points

  - key: usage.css_pain_points
    aliasFor: opinions_others.css_pain_points.others
  - key: usage.css_pain_points.question
    aliasFor: usage.other_pain_points_freeform
  - key: usage.css_pain_points_freeform
    aliasFor: usage.other_pain_points_freeform

  - key: options.css_pain_points.na
    t: None

  # Missing Features
  - key: opinions.css_missing_features
    t: What do you feel is currently missing from CSS?
  - key: opinions.css_missing_features.description
    t: For each matchup, pick the feature you'd most like to be able to use in CSS today.

  - key: usage.missing_features_freeform
    t: What features do you feel are currently missing from CSS altogether?
  - key: usage.missing_features_freeform.others
    aliasFor: usage.missing_features_freeform
  - key: usage.missing_features_freeform
    aliasFor: usage.missing_features_freeform

  - key: usage.css_missing_features
    t: Missing Features
  - key: usage.css_missing_features.question
    aliasFor: usage.missing_features_freeform

  - key: opinions_others.css_missing_features.others
    t: Other Missing Features

  - key: options.css_missing_features.na
    t: None

  # - key: opinions_others.css_missing_features.others.note
  #   t: >
  #       These results were normalized based on the contents of a freeform field.
  #       To view the raw, unprocessed responses check out [whatsmissingfromcss.com](http://whatsmissingfromcss.com/).

  - key: opinions.sum_up_one_word_css
    t: CSS in one word
  - key: opinions.sum_up_one_word_css.description
    t: How would you sum up your opinion of CSS in one word?

  - key: happiness.pre_post_processors
    t: How happy are you with the state of pre/post-processors?
  - key: happiness.css_in_js
    t: How happy are you with the state of CSS-in-JS libraries?
  - key: css_in_js.css_in_js_happiness
    aliasFor: happiness.css_in_js
  - key: happiness.css_frameworks
    t: How happy are you with the state of CSS frameworks?
  - key: css_frameworks.css_frameworks_happiness
    aliasFor: happiness.css_frameworks

  - key: happiness.state_of_the_web
    t: State of Web Technologies
  - key: happiness.state_of_the_web.description
    t: How happy are you with the general state of web technologies?
  - key: usage.state_of_the_web_happiness
    aliasFor: happiness.state_of_the_web
  - key: usage.state_of_the_web_happiness.question
    aliasFor: happiness.state_of_the_web.description

  - key: happiness.state_of_css
    t: State of CSS
  - key: happiness.state_of_css.question
    t: How happy are you with the general state of CSS?
  - key: usage.state_of_css_happiness
    aliasFor: happiness.state_of_css
  - key: usage.state_of_css_happiness.description
    aliasFor: happiness.state_of_css.question

  # pain points/currently missing (results)
  - key: css_pain_points.css_pain_points_wins
    t: CSS Pain Points
  - key: css_pain_points.css_pain_points_wins.description
    t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won.

  - key: css_pain_points.css_pain_points_matchups
    t: CSS Pain Points (Matchups)
  - key: css_pain_points.css_pain_points_matchups.description
    t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item.

  - key: css_missing_features.css_missing_features_wins
    t: Features Missing From CSS
  - key: css_missing_features.css_missing_features_wins.description
    t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won.

  - key: css_missing_features.css_missing_features_matchups
    t: Features Missing From CSS (Matchups)
  - key: css_missing_features.css_missing_features_matchups.description
    t: Which feature would you most like to be able to use in CSS today? Percentage of rounds won by left-hand item against top-side item.

  - key: usage.css_js_balance
    t: CSS vs JavaScript Balance
  - key: usage.css_js_balance.question
    t: How do you divide your time between writing CSS (including HTML markup) and JavaScript code?

  - key: usage.css_usage_type
    t: CSS Usage
  - key: usage.css_usage_type.question
    t: In what context do you primarily use CSS?
  - key: usage.css_usage_type.others
    t: Other CSS Usages

  ###########################################################################
  # Resources
  ###########################################################################

  - key: resources.first_steps_css
    t: First Steps With CSS
  - key: resources.first_steps_css.description
    t: When first starting out, which resources did you use to initially learn CSS?

  - key: resources.learning_methods_css
    t: CSS Learning Methods
  - key: resources.learning_methods_css.description
    t: Which resources have you used to learn CSS?

  # sites & courses
  - key: resources.sites_courses_css
    aliasFor: resources.sites_courses
  - key: resources.sites_courses_css.description
    t: Which CSS-related sites/courses/etc. do you use to learn about CSS?

  # podcasts
  - key: resources.podcasts_css
    aliasFor: resources.podcasts
  - key: resources.podcasts_css.description
    t: Which CSS-related podcasts do you listen to?

  # people
  - key: resources.people_css.others
    aliasFor: resources.people.others
  - key: resources.people_css.others.description
    t: People you read, follow, or just want to highlight for their work in the CSS ecosystem.

  ###########################################################################
  # Survey Help
  ###########################################################################

  - key: features.features_intro_css
    t: |
      Welcome to the survey! This first part is all about figuring out
      which **features** of CSS you know about.

      By the way, if you want to tell us more about any of your choices, just click that little "comment" icon!

  - key: tools.tools_intro_css
    t: |
      The next couple sections focus on the **libraries** and **frameworks** that make up
      the CSS ecosystem. Let us know what you're excited about!