Styled Components utilize ________ to generate unique class names for styles.

  • BEM methodology
  • Hashing algorithms
  • Inline CSS
  • Random strings
Styled Components generate unique class names for styles by using hashing algorithms. This ensures that styles are isolated and don't interfere with other components, a technique often referred to as "CSS-in-JS" or "CSS Modules."

In CSS, if you want an element to inherit a property's value from its parent element, you would use the value ________.

  • Copy
  • Inherit
  • Override
  • Override-all
To make an element inherit a property's value from its parent element, you would use the 'inherit' value. This ensures that the child element inherits the property value from its parent.

What does the ::before pseudo-element do in CSS?

  • It creates a pseudo-element that is the first child of the selected element, allowing content to be generated before the actual content of the element.
  • It selects the element that comes after the targeted element.
  • It selects the first child element of the parent element.
  • It targets the element that is immediately before the current element.
The ::before pseudo-element in CSS is used to generate content before the content of an element. It creates an element that appears as the first child of the selected element and allows you to insert generated content (such as text or images) before the actual content of the element.

In SASS or SCSS, the ________ allows you to reference the parent selector within a nested rule.

  • !
  • #
  • &
  • @
In SASS or SCSS, the ampersand (&) symbol is used to reference the parent selector within a nested rule. This is useful for creating more specific or complex selectors based on the parent selector's context. For example, you can use &:hover to apply styles when the parent element is hovered.

If you have two conflicting CSS rules that point to the same element, how does CSS determine which one to apply?

  • The first rule encountered in the stylesheet is applied.
  • The last rule encountered in the stylesheet is applied.
  • The rule with the highest specificity is applied.
  • The rule with the most specific selector is applied.
When two CSS rules conflict and apply to the same element, the last rule encountered in the stylesheet takes precedence. This is known as the "cascading" nature of CSS.

In a large project, you want to have separate SCSS files for variables, mixins, and base styles. How would you structure and integrate them into a main SCSS file?

  • Import the separate SCSS files for variables, mixins, and base styles at the beginning of the main SCSS file.
  • Manually copy and paste the content of the separate SCSS files into the main SCSS file.
  • Use JavaScript to dynamically load the separate SCSS files when needed.
  • Use external libraries to handle the integration of SCSS files.
To structure and integrate separate SCSS files, you should use the @import directive in the main SCSS file. Import the separate SCSS files for variables, mixins, and base styles at the beginning of the main SCSS file. This allows you to maintain a modular and organized codebase.

The ________ property in CSS is used to apply an animation to an element.

  • animation-delay
  • animation-duration
  • animation-iteration-count
  • animation-name
To apply an animation to an element in CSS, you use the animation-name property to specify the name of the animation defined with the @keyframes rule. This property associates the element with the animation it should use.

What does the animation-fill-mode property do in a CSS animation?

  • It specifies the animation duration.
  • It defines the timing function for the animation.
  • It controls the behavior of the element before and after the animation.
  • It sets the animation name.
The animation-fill-mode property is used to control the behavior of the animated element before and after the animation execution. It can have values like "none," "forwards," "backwards," and "both." "None" is the default value, which means the element doesn't maintain any styles before or after the animation. "Forwards" retains the styles after the animation ends, and "backwards" maintains the styles before the animation starts. "Both" keeps the styles both before and after the animation.

How do you include a mixin in your SCSS code?

  • @apply myMixin();
  • @include myMixin();
  • @insert myMixin();
  • @use myMixin();
To include a mixin in your SCSS code, you use the @include directive followed by the mixin name inside parentheses. For example, @include myMixin(); will include the styles defined in the myMixin mixin at that point in your stylesheet. You can also pass arguments to the mixin if it accepts them.

How can you make the text of an element bold using CSS?

  • font-decoration: bold;
  • font-weight: bold;
  • text-decoration: bold;
  • text-style: bold;
To make the text of an element bold in CSS, you should use the font-weight property and set it to the value bold. This increases the thickness of the characters, making them appear bold.

How can you target an element that is the only child of its parent using a pseudo-class?

  • :first-child
  • :last-child
  • :nth-child(1)
  • :only-child
To target an element that is the only child of its parent, you can use the :only-child pseudo-class. This selector is used when you want to apply styles or behavior to an element that is the only child within its parent container. For instance, you might want to style a single button in a list of buttons.

In terms of performance, why might you opt for the "woff2" font format over others?

  • WOFF2 files are typically smaller in size
  • WOFF2 fonts are easier to load asynchronously
  • WOFF2 fonts are supported by more browsers
  • WOFF2 provides higher quality and clearer text rendering
Opting for the "woff2" font format over others can improve web performance because WOFF2 files are generally smaller in size. Smaller files mean faster downloads and quicker web page rendering, resulting in a better user experience.