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."
What does the CSS property "line-height" primarily affect?
- Background color
- Font color
- Spacing between lines of text
- Text size
The CSS property "line-height" primarily affects the spacing between lines of text within an element. It determines the vertical distance between the baselines of two consecutive lines of text. Adjusting the line-height can impact the readability and aesthetics of text on a webpage.
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.
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.
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.
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 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.
In SASS/SCSS, what is the primary difference between a mixin and a function?
- Functions are used for reusable styles, while mixins are for reusable logic
- Functions can be called multiple times within a rule, but mixins cannot
- Mixins can accept arguments, but functions cannot
- Mixins can produce CSS rules, but functions cannot
The primary difference between a mixin and a function in SASS/SCSS is that functions are used for reusable styles and can return values, while mixins are used for reusable logic and can generate CSS rules. Mixins can accept arguments, which allows for more dynamic behavior, whereas functions are typically used for calculations and value generation.
What is the primary goal of the OOCSS (Object-Oriented CSS) methodology?
- To apply styles globally
- To eliminate the need for HTML
- To make CSS more complex
- To separate content and layout
The primary goal of the OOCSS (Object-Oriented CSS) methodology is to separate content and layout. OOCSS promotes creating reusable and modular CSS classes that can be applied to various elements in a layout, separating the styling from the content. This improves maintainability and promotes a more organized CSS structure.
Which of the following CSS combinators targets a direct child element?
- *
- +
- >
- ~
The ">" combinator is used to target a direct child element, ensuring that styles are applied only to the immediate child and not to nested descendants.