FAQ: Style - Share Styles Across Multiple Components

I think the client decided to go to the disco after that ‘minimalistic’ presentation xD

1 Like

Thank you! It happened the same thing to me

Ok, so dumb question.

What does the “./” do? How is it different than nothing? How is it different than “…/”, which appeared in a previous lesson?

1 Like

Basic question here, but before using CSS modules, styles are added by using ‘style’ attribute.
Why then, once we’ve incorporated modules, are we using ‘className’ attribute and not ‘style’ attribute?


This has to do with separation of concerns. “Style” attribute is used for inline styles and className attribute is used when we have separated the CSS from our components.

When you are importing a module in the component.js file, you would use className attribute. While if you are using inline styles or style object variables, you would use the style attribute.

Kindly include React official documentation in your reading as well to learn the best practices for styling your applications.

className attribute and individual CSS modules provide better separation of concerns.

./ file path will makes the browser look in the current directory. For instance, consider this file structure:

a folder called HTML-Practice contains two folders:
1- Path
2- Cat-Pictures

HTMLPractice is the parent of Path and Cat-Pictures.

Path folder contains two things:
1- index.html
2- cat (folder with kitty.jpg)

Path is parent of index.html and cat (folder with kitty.jpg)

if I want to access the cat from my index.html, I would use this path:

 <img src="./cat/kitty.jpg">

here, the first dot means “current directory”. the current directory is the Path folder. The forward slash is the directory separator.

I am also able to go inside the cat folder to access kitty.jpg by skipping the ./ and then the file path looks like this:

<img src="cat/kitty.jpg">

I can skip it because both the cat folder and index.html are in the same parent folder called Path.

now, I want to go into the HTML-Practice folder and access the Cat-Pictures there.

This will be my file path:

 <img src="../Cat-Pictures/anyPic.jpg">

the first Dot is the current directory (Path)
the second dot the is Parent Directory (HTML-Practice) of the Current Directory (Path).

one thing that makes selecting file paths easier for me is to start navigating from my main file. My main file is the “index.html”. This is the “starting point” and from there you move forward. For example, if I wanted to go Outside of HTML-Practice into a grandparent directory, I would do this:

 <img src="../../doggy.jpeg">

this will take me outside of Path, HTML-Practice to a grandparent Directory where doggy.jpg resides.
here the first dot is Path, second dot is HTML-Practice, then the directory separator, then the first dot is the current directory which is HTML-Practice and second dot is its parent, then the separator, then the file.

This is know as a relative path.

I learned it when I created all of these folders in my computer and created an HTML file and did some basic HTML using cute cato and doggy pics. So, now you can try it too. I find learning relative paths important because we are constantly importing files. :blush: :cherry_blossom: :black_cat: :service_dog:

1 Like