mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): videos and transcripts for CSS frameworks and preprocessors (#59488)
This commit is contained in:
Tom
+72
-2
@@ -2,13 +2,83 @@
|
||||
id: 67d1d74780981f521b8ac090
|
||||
title: What Is a CSS Framework, and What Are Some Advantages and Disadvantages of Using It?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: A-z2RMOP9dE
|
||||
dashedName: what-is-a-css-framework-and-what-are-some-advantages-and-disadvantages-of-using-it
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video lecture and answer the questions below.
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is a CSS framework, and what are some advantages and disadvantages to using it?
|
||||
|
||||
Let's learn about CSS frameworks and why you should use them.
|
||||
|
||||
As you work CSS, you may experience certain challenges, such as keeping the styles consistent and compatible across browsers, avoiding repetition, and handling the growing complexity and number of CSS files across your project. CSS frameworks are very helpful to prevent these issues from the start.
|
||||
|
||||
A CSS framework consists of pre-written CSS code that you can use to style your HTML elements.
|
||||
|
||||
By using a CSS framework, you can speed up your workflow, create a uniform visual style across the website, make your design look consistent across multiple browsers, and overall keep your CSS code more organized.
|
||||
|
||||
You can think of a CSS framework as toolbox, where you can quickly find a style or component that fits your needs and use it right away, without having to specify it yourself using CSS properties. These frameworks often include pre-defined styles and components that you can use very easily, including styles for creating responsive layouts.
|
||||
|
||||
Some of the most popular CSS frameworks are Tailwind CSS, Bootstrap, Materialize, and Foundation.
|
||||
|
||||
Let's talk a little bit about the two types of CSS frameworks: utility-first CSS frameworks, and component-based CSS frameworks.
|
||||
|
||||
Tailwind CSS is a utility-first CSS framework. This means that it has small classes with very specific purposes, like setting the margin, padding, or background color. You can usually assign these small classes directly to the HTML elements.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">
|
||||
Button
|
||||
</button>
|
||||
```
|
||||
|
||||
This button will have a blue background with white and bold text, a vertical padding of 2 rem, a horizontal padding of 4 rem, and rounded borders. The class `hover:bg-blue-700` will turn the background dark blue when the user hovers over it with the mouse.
|
||||
|
||||
As you can see, Tailwind CSS classes are very granular, so they can be applied to individual HTML elements as needed.
|
||||
|
||||
In contrast, Bootstrap is a component-based CSS framework. It has pre-built components with pre-defined styles that you can easily add to your website. These components are usually available in the official documentation of the CSS framework, where you can copy and paste them quickly into your project.
|
||||
|
||||
For example, if you want to create a list group in Bootstrap, you would write something like this in HTML:
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 25rem;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">HTML</li>
|
||||
<li class="list-group-item">CSS</li>
|
||||
<li class="list-group-item">JavaScript</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
These pre-defined classes will automatically apply standard styles to the card, list group, and list group items.
|
||||
|
||||
Notice that here, instead of adding small and general classes, we are adding the entire component, including the HTML structure. This is why Bootstrap is component-based.
|
||||
|
||||
```html
|
||||
<div class="card" style="width: 25rem;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">HTML</li>
|
||||
<li class="list-group-item">CSS</li>
|
||||
<li class="list-group-item">JavaScript</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
While CSS frameworks have many advantages, they also have certain disadvantages. It's important that you know both of them to make an informed decision.
|
||||
|
||||
Since CSS frameworks rely on pre-defined styles, if you try to add custom CSS on top them, specificity issues may arise. The selectors used by the framework may have a higher specificity than the selectors that you use in your custom CSS, so the correct style may not be displayed. To solve this, you will need to use a more specific CSS selector, so this may bring some additional challenges.
|
||||
|
||||
They can also limit uniqueness to a certain extent because their standard styles are used widely across many websites. However, this can be addressed by customizing the CSS with your unique styles.
|
||||
|
||||
And finally, you should consider potential performance issues that CSS frameworks might introduce. Some frameworks are quite large, and may take some time to load.
|
||||
|
||||
As a developer, you will decide if using a CSS framework is helpful for your project, if using entirely custom CSS is better, or perhaps a mix of both.
|
||||
|
||||
# --questions--
|
||||
|
||||
|
||||
+156
-3
@@ -2,13 +2,166 @@
|
||||
id: 67d2fe63c8b0049ad7481021
|
||||
title: What Is the Value of Using a CSS Preprocessor, and What Are Some Disadvantages?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
videoId: qCedKYGOYg4
|
||||
dashedName: what-is-the-value-of-using-a-css-preprocessor-and-what-are-some-disadvantages
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is the value of using a CSS preprocessor, and what are some disadvantages?
|
||||
|
||||
Let's learn about CSS preprocessors.
|
||||
|
||||
A CSS preprocessor is a tool that extends standard CSS with powerful features like variables, mixins, nesting, and selector inheritance.
|
||||
|
||||
Some of these features, like variables and nesting, are now supported or are getting more support in native CSS, and this trend is very likely to continue. However, earlier versions of native CSS did not support these features.
|
||||
|
||||
That is why CSS preprocessors became so widely used in the first place. They take the CSS rules and styles you write, along with their extended syntax, and compile them into a native CSS file that browsers can understand.
|
||||
|
||||
By using a CSS preprocessor, you can structure your CSS code in a more reusable and logical way. You will also have access to powerful features, like mixins, that are not directly supported by CSS.
|
||||
|
||||
Some of the most popular CSS preprocessors are Sass, Less, and Stylus.
|
||||
|
||||
Let's talk about Sass.
|
||||
|
||||
Sass stands for "Syntactically Awesome Style Sheets." It's compatible with all versions of CSS and maintained by a large community of developers.
|
||||
|
||||
Sass supports features like:
|
||||
|
||||
- Variables, so you can store and reuse values throughout the spreadsheet.
|
||||
|
||||
- Nested CSS rules, so you can create a visual hierarchy in your file.
|
||||
|
||||
- Modules, so you can split your styles into multiple stylesheets.
|
||||
|
||||
- Mixins, so you can reuse CSS declarations throughout your site.
|
||||
|
||||
- Inheritance, so multiple CSS selectors can share properties.
|
||||
|
||||
- And operators, for basic mathematical operations.
|
||||
|
||||
Sass also supports two syntaxes.
|
||||
|
||||
The SCSS syntax stands for Sassy CSS, which is a superset of CSS. This means that SCSS expands the basic syntax of CSS.
|
||||
|
||||
SCSS is the most common syntax that you'll use and find when working with Sass. It requires the use of curly braces (`{` and `}`) around CSS properties and semicolons (`;`) at the end of CSS declarations, just like native CSS.
|
||||
|
||||
These files have a `.scss` extension. Here is an example:
|
||||
|
||||
```scss
|
||||
$primary-color: #3498eb;
|
||||
|
||||
header {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
```
|
||||
|
||||
What you see here, at the top, is a variable defined in SCSS. This variable is used in the CSS rule below.
|
||||
|
||||
Let's compare SCSS with a less-frequently used syntax, the indented syntax. This is also known as the "Sass syntax" since it was Sass's original syntax.
|
||||
|
||||
This syntax relies on indentation to define the rules. Here is an example:
|
||||
|
||||
```scss
|
||||
$primary-color: #3498eb
|
||||
|
||||
header
|
||||
background-color: $primary-color
|
||||
```
|
||||
|
||||
Notice that there are no curly braces around the CSS rule, or semi-colons at the end of CSS declarations. At the top, you can also see a variable. Notice that its name starts with a dollar sign (`$`) in this syntax, which is different than native CSS variables, but works very similarly.
|
||||
|
||||
Sass also supports a powerful feature, called mixins.
|
||||
|
||||
Mixins allow you to group multiple CSS properties and their values under the name and reuse that block of CSS code throughout your stylesheet.
|
||||
|
||||
This makes your CSS code less repetitive and easier to maintain because, if you change something in that block, the change is applied everywhere you use the mixin.
|
||||
|
||||
Since mixins can have custom and descriptive names, they can be helpful to understand what each block of CSS code does, which can make your stylesheets easier to understand.
|
||||
|
||||
And mixins also promote consistency in stylesheets by applying uniform styles.
|
||||
|
||||
This is an example of a mixin in SCSS syntax:
|
||||
|
||||
```scss
|
||||
@mixin center-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
To define a mixin, you start by writing the `@mixin` at-rule, followed by the name of the mixin. In this case, the mixin is called `center-flex`. It has three CSS properties to center elements using Flexbox.
|
||||
|
||||
Then, once you have your mixin defined, you would use the `@include` at-rule to include those properties in a CSS rule. You just need to write `@include` followed by the name of the mixin. In this case, the name is `center-flex`:
|
||||
|
||||
```scss
|
||||
section {
|
||||
@include center-flex;
|
||||
height: 500px;
|
||||
background-color: #3289a8;
|
||||
}
|
||||
```
|
||||
|
||||
This is the full code with the mixin and the CSS rule:
|
||||
|
||||
```scss
|
||||
@mixin center-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section {
|
||||
@include center-flex;
|
||||
height: 500px;
|
||||
background-color: #3289a8;
|
||||
}
|
||||
```
|
||||
|
||||
You can include the mixin in as many CSS rules as needed. If you need to make any changes, you would only need to change the mixin itself and the changes would be applied everywhere automatically. This example is in SCSS syntax. Notice that it has the curly braces and the semicolons.
|
||||
|
||||
Here is the equivalent in indented syntax, also known as Sass syntax, without the curly braces or semicolons:
|
||||
|
||||
```scss
|
||||
@mixin center-flex
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
section
|
||||
@include center-flex
|
||||
height: 500px
|
||||
background-color: #3289a8
|
||||
```
|
||||
|
||||
And this is the compiled CSS code, what the browser will actually interpret after the file is compiled into native CSS:
|
||||
|
||||
```css
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 500px;
|
||||
background-color: #3289a8;
|
||||
}
|
||||
```
|
||||
|
||||
Notice that it includes the three mixin properties at the top: `display`, `justify-content`, and `align-items`.
|
||||
|
||||
This is only a simple example of what CSS preprocessors are capable of. They have many powerful features that are worth learning and applying in your daily workflow.
|
||||
|
||||
However, they do have potential disadvantages that you should be aware of.
|
||||
|
||||
First, CSS preprocessors have to compile the CSS rules into standard CSS. While the potential overhead of this compilation process is often minimal in terms of time and resources, it is something that you should consider for real-world projects.
|
||||
|
||||
Next, they can create debugging challenges, since browsers use the compiled CSS directly. Finding out what is generating a problematic style from the extended syntax can take a few extra steps when compared to standard CSS.
|
||||
|
||||
However, the advantages of CSS preprocessors usually outweigh their disadvantages, especially for complex projects. They can be very helpful for writing cleaner, reusable, less repetitive, and scalable CSS.
|
||||
|
||||
# --questions--
|
||||
|
||||
@@ -106,7 +259,7 @@ Think about the two different syntaxes available for working with Sass.
|
||||
|
||||
---
|
||||
|
||||
SCSS is a syntax for Sass that is similar to standard CSS.
|
||||
SCSS is a syntax for Sass that is closer to standard CSS.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user