Classes or id?
One of the most common problems is using classes or id. Often novice layout designers see something about id and start using it where they don’t need it. Let’s immediately define – id should be used for js. Let’s say you need to call a plugin on a specific block – you can use id (although this is optional, unless the plugin itself can only be tied to work with id). As an option, this is of course the use of smooth scrolling to the anchors. indicate
href="#services", and at the block write
But why is it not recommended to use id itself? Very simple:
- Well, first of all, it can only be used once (i.e. if you have
id="services"– you cannot write it anywhere else). This robs us of flexibility and reuse.
- Only one id can be hung on one element. While there are many classes (be they element or modifier classes).
- id is too heavy. Interrupting id with a class will not work without! Important, and it should be avoided as much as possible in the layout.
Actually, these reasons are enough to refuse to use id (at least for styling).
Working with forms
A common beginner’s mistake is to misunderstand how the tag works.
form and various
input… For example, two radio buttons are given different names, and as a result, you can click on each (although this is, for example, gender selection). For a group of checkboxes, different names are given everywhere, although you need to write one and use square brackets so that you can send all this as a key: value pair to the mail. Just here you can read about it.
Another common mistake is misuse
label and its attribute
for… But here it is generally simpler.
Using old tags
We will not stop here for a long time, I will just say – you need to check the specification, look into the validator. And don’t use tags like
fontwhich have been deprecated for quite some time.
Problems using floats
Yes, floats are already outdated, but personally I think that any layout designer should have a base for them. You never know what will come across in projects. And of course, the main “feature” of floats is their bug with float blocks falling out. Many novice layout designers do not notice this and leave it as it is, and then this can lead to a completely gone layout. Use clearfix and you will be happy 🙂
Probably the most painful topic of all beginners is
position… Many start to do everything through
absolute, some move elements using
bottom, when there is
margin… This is all a rather difficult topic to understand, but also not the most difficult one. You just need to memorize and practice. By the way, you can take a look at my small example of correct use
The last topic for today, but also quite important. Many people use the tag
img instead of
background-image, and vice versa. Although everything is quite simple here – icons are a background, and content pictures (like a picture for an article, for example) –
img… But, there are exceptions, for example, if any animations will be performed over the icon, it happens that it is better to use exactly
These were the main (in my opinion) layout topics that novice layout designers should pay attention to. Yes, this is probably not all, but probably the most important thing.
Write your thoughts about it, maybe you have any other suggestions.
And if you want an analysis of these topics from me – write!
See you soon)