Alan Alcesto: Discussing Dev
CSS was the name of the game this week. CSS stands for Cascading Style Sheet(s) and is used to format the layout of a website. So with CSS you can add some style to your code. Whether it be for positioning, adding color, or resizing elements; CSS is an essentail tool in adding character to a Website. With all this in mind I knew it was essential for me to learn CSS to provide my site with a more uniformed and developed look.
Learning CSS and its syntax was relatively simple, as it is relatively self-explanatory, but I ran into some road blocks using Classes and ID's, so I needed to put on my thinking-cap and do my research.
What is the difference between Classes and ID's? When would you use ID's over Classes, and vice-versa? After diving into the interwebs I was able to come across the answers to these questions, so I am going to share this information with all those entry-level developers, such as myself.
Keep in mind that ID's are one of a kind. By this I mean that each element can only have one ID and each page can only have one element with that ID, making ID's unique in your code.
On the other hand, Classes are a dime-a-dozen. You can have the same class used on as many elements as you want and multiple Classes can be used on the same element. So for example, if you wanted to style a certain element, but still wanted to share all other attributes, you can simply use multiple Classes.
The way I imagined it was a student ID card. I went to the University of Illinois at Chicago (UIC), and all students were given a student ID card, or UID. A UID would signify that you are a student of UIC. This information was reusable and can be applied to all students, so like a Class.
All students were also given a pin number, also known as a UIN. A UIN was specific to each student, so no other student could have the same combination in your UIN. Much like ID's, a UIN was unique.
In concerns to using ID's and Classes in CSS, they have the same function, so one cannot do something other cannot. The difference comes in when using Javascript, but we possibly talk about that more in a different blog. The big thing to take away is that in your code ID's can only be used once while Classes can be used multiple times. This will be important when validating your code. If you have multiple ID tags in your code, your page will fail validation, which I wouldn't wish on anyone.
When using Classes you will want to use a full stop(".class-name") and with ID's you are going to use a hash character ("#id-name"). When qualifying your Class or ID you don't want to over generalize. The trick is to be specific. A easy way to do this is using "block-element" or "block-modifier". By using this it will be unlikely you have used this name before in your code and it is easy to read/understand. With this in mind, you want to keep your names short so they are faster to type and easy to scan over if you need to refer back to them.