"Harry Potter! You C(SS) what I have become?"

-

 
"Harry Potter! You C(SS) what I have become?"

Sorry for the Lord Voldemort quote as an opener... But these CSS selectors are a lot! And I needed something that would echo... the drama...

CSS selectors are taking over my life!!!

Part I: The latest one that I am learning is pseudo class.

It's quite confusing. 

This is actually really quite neat, though!

I wrote the following code:

a:hover {

  color : darkorange;

}

And it made it so that whenever you hover over a link it makes it go dark orange.

That was really neat!

Other examples of pseudo-class selectors are:

:focus

:visited

:disabled

:active

and again, once again, because I like it so much: 

:hover

Part II: Other Stuff I've Learned

  • ID in CSS always overrides type and class
  • ID's and classes are beginning to confuse me!
    • ID applies to a specific element only
    • Class ... I get it... but I mean like... what does it mean? Like... arrrrrgrgh

  • I have learned about specificitY
  • This is the order in which the browser decides which CSS styles will be displayed
  • The hierarchy goes like this:

    ID>class> type (where ID is the highest specificity).
This wasn't enough for me, so here's a diagram!


Codecademy says it best:

Also:

  • Chaining
    • This was actually the easiest thing I'd learned so far all day. It's just a combination of all of the above! E.g. you can combine a type and a class:
p.important {
  color: red;
}

Seems pretty intuitive to me so far.
  • Descendant Combinators
    • This is when you add a style to a parent in the HTML (and maybe to a grandparent too? I don't know??!) and then you extend the style to its descendants.
    • e.g. you would add a class to a <ul> element and then call the <li> elements by adding them in like so:
      • <ul class ="funky">
      • .funky li {
          color: hotpink;
        }
  • Chaining and Specificity
    • This basically just explains how the hierarchies of specificity I defined above apply when there are chained selectors.
  • Multiple Selectors
    • Seems pretty easy to me so far. 
    • Multiple selectors have to be separated by 'commas'
    • They seem to be put on a new line too, I'm guessing this is just best practise???!

Part III: New Solutions to Problems


One of the Engineering Managers at work has reached out to me after reading my blog posts!!! Thank you so much Adam! He asked me if I was using the Mozilla Developer Network (MDN). 

I told him that I wasn't much really - I'd been introduced to it as part of the course I'm doing, but that's it.

I looked at it and it gave me a really simple overview of CSS Selectors.

Codecademy is good for teaching things, but MDN looks like it might be good for revision!

Below are all of the CSS selectors, listed on MDN!!! 😮😯

Comments

  1. Adam30 November 2022 at 14:08

    So this is some of my perspective to keep in mind as you continue to develop your frontend knowledge. I'm not recommending to start ignoring what Code Academy suggests but to keep this in mind once you finish your course.

    I am going to have to disagree with Code Academy on what they suggest. Type selectors become very unmanageable as the complexity of your site/web application CSS grows. You don't want to have selectors that look likes:

    ```
    main > section > section > p > span > a {
    color: inherit;
    }
    ```

    Here's a Codepen with an example:
    https://codepen.io/adjohnston/pen/zYaJexp

    While you could see how this maps to the HTML you're also heavily tied to it. If you need to make a change to your HTML, you'll break your styling unless you also update the CSS. This becomes painful if your CSS grows to 1000s or 10s of thousands of lines.

    You'll likely spend more time using classes. Classes allow for some usage that makes CSS more maintainable and they're more flexible (you can have multiple classes on a single element and take advantage of chaining) since they can be applied to any HTML elements. This also works well with components design and you may end up creating components with React or similar libraries.

    I'd also recommend avoiding use of ID. You can only have a single ID present on a page for it to be valid HTML.

    ReplyDelete
  2. Susanna C1 December 2022 at 03:55

    Hi Adam, Thank you so so much for replying.

    Please make as many suggestions as possible! Codecademy introduces things and is good for interactivity but they are not great at saying how commonly things are used, what is the smoothest way to do something, etc.

    So what I take away from this is that it is best to style by classes.

    Types can take too long to change IDs are best to avoid as they can only be used once.

    So classes are the best to style with.

    It is best for me to learn these things while I'm starting out, and before the many many projects I will build to practise!!! So thanks!!!!

    I will take this forward from now onwards, thanks!

    ReplyDelete

Post a Comment

Popular posts from this blog

Hello World

-
Image
 Hello from Susanna Codes! Hi everyone,  My name is Susanna and I'm a 28-year-old aspiring software engineer from Brighton! As I type this, listening to music from "Le Fabuleux Destin d'Amelie Poulain" (it reminds me of home, in Luxembourg, where I am from - I'm missing home quite a lot lately!) and look forward to some Irish Cream tea in my afternoon break, I am thinking: How lucky I am that my amazing colleague Rosana helped me out with a plan for my software engineer journey (she directed me to the front-end first). How HTML and CSS would not have been my first languages of choice had I not been guided in this direction, as in my head they were seen as 'less-serious' langages. How done I am with what other people think of me and if other people see the 'front-end' as softer then so be it! Everyone has to start somewhere. I am so grateful to be on this journey, with Codecademy's Front-End Engineer Career Path.  Thank you to Async Brighton as ...
Read more

Yosemite

-
Image
Yosemite I'll never forget the first time I head the song Yosemite by Lana del Rey. I very nearly clicked away.  It was quite near the start of my Software Engineering journey, right near when I start learning the Front-End/Web Development. I was listening to Arcadia by LDR before, maybe twice, and then Blue Banisters came on. I nearly clicked away in the first 30 seconds but I forced myself to keep listening anyway.  I'll never forget how that song has made me feel. It became my song of 2022 even though I only discovered it in November. I can still listen to it every day and get that complete sense of wonder and of awe that I felt the first time that I heard it. That ending of the song is completely amazing, and it just completely just blows me away every time. "Withstanding all the time, changes, and seasons..." - LDR Concise Body Arrow Functions Why am I so bad at arrow functions? Whyyyyyyyyyyy?  Just kidding, I am beginning to get them. But why are they so hard? ...
Read more

Where To Hide A Star

-
Image
Where To Hide A Star I haven’t read this book but I just saw this title of a forthcoming children’s book on the train and so I wanted to write a blog post based off of this as well. The last six months have been… rewarding and fulfilling. I have managed to make all of my dreams come true and to defy expectations,  Sometimes the best place to hide is in plain sight and if you reread all of my blogs over the last six months (all 200 of them) you would know exactly what I’m struggling at work and what was going on. And why. But I’ve managed to overcome most of my challenges. Neurodiversity. Being very new in the field relative to the expectations of the job. Being in a new workplace environment. All stuff which I can handle and I am doing just fine. Because I am amazing and fabulous and I can do anything. I am loving the job. I am thriving. I am loving just getting on with it. I love my work. I am having massive breakthroughs. On Thursday I had what felt like the biggest breakthrough ...
Read more