Advanced Styling 1,2, and 3 Assessment - VV

[Vladlen_Vronsky]

Hey there!

Looking for an assessment on my Advanced Styling Code. This is the MDN Section: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling

Here is my code for Task 1 & 2, I’ve put them together:

Here’s my code for Task 3: https://codepen.io/vvronskyFX/pen/oNagyYz

At one point, i was trying to put all Task assessments on one single page. My feedback form started to get bugs in it and my Radio buttons got messed up.

I think it’s because some of the CSS styling started to interfere with each other.

Here’s the buggy code for Tasks 1, 2 and 3 on one page:

Is there a way to remedy this? What if in the future, I’d want to have styled search bars, Radio buttons and Feedback forms on a single page? Would I have to individually style each tag?

Thank you in advance on helping here! Been learning a lot!

Cheers,
Vlad

[mikoMK (Michael Koch)]

Hello @Vladlen_Vronsky

Great job!

Here are some comments:

• Task 1: I guess postion: relative on the icon is a left over from an earlier attempt. It’s not needed since you used Flexbox.
• Task 1: I would add some left and right padding to the input.
• Task 2: Everything fine.
• Task 3: Everything fine. Nice idea with not(:placeholder-shown)

@Vladlen_Vronsky

I think it’s because some of the CSS styling started to interfere with each other.

Your analysis is correct. You styled the search icon from task 1 with the selector div. This interacts with the <div>s around label/input in task 3.

@Vladlen_Vronsky

Is there a way to remedy this? What if in the future, I’d want to have styled search bars, Radio buttons and Feedback forms on a single page? Would I have to individually style each tag?

As an example for this tasks you could give each of the three forms a class. (<form class="form1"> and so on). Then you use selectors like form1 div for specific styles.

Another possibility would be to use classes directly on the specific elements. For example <div class="search-icon"> and the selector .search-icon to style it.

The second version has the advantage that you give some meaning to the selector. In a bigger code base it would be clear what the .search-icon styles are used for. Compared to form1 div.

Nowadays CSS development is very centered around classes. They are flexible, can be combined and help keep the specificity low. Just to give you an idea, here’s a small excerpt from a form I built using the Vuetify framework. This is all automatically generated when using their components with some attributes:

[Vladlen_Vronsky]

Thank you for the valuable feedback!

@mikoMK

Nowadays CSS development is very centered around classes. They are flexible, can be combined and help keep the specificity low. Just to give you an idea, here’s a small excerpt from a form I built using the Vuetify framework. This is all automatically generated when using their components with some attributes:

Wow, are those multiple classes within one class? That’s new for me!

Thank you for going through and helping with all of these.

@mikoMK

• Task 1: I guess postion: relative on the icon is a left over from an earlier attempt. It’s not needed since you used Flexbox.
• Task 1: I would add some left and right padding to the input.

I’ll go work on some of the recent corrections you made within this week, if not, this weekend.

@mikoMK

• Task 2: Everything fine.
• Task 3: Everything fine. Nice idea with not(:placeholder-shown)

Awesome and thanks!

[mikoMK (Michael Koch)]

@Vladlen_Vronsky

Wow, are those multiple classes within one class?

Exactly! For example in the first line there are general styles for all <input>s through v-input and specific styles for <input type="text"> through v-text-field. Additionally, you can say how dense the input shall be. This is controlled by the v-input--density-* classes.
Luckily, I didn’t have to write all the styles myself . I just used the Vuetify component <v-text-field> and all the elements, classes and styles where created automagically.