HTML & CSS How can I improve my login form?

[Malcolm]

Hey all!

So over the last few months, I've been sharpening my HTML/CSS skills. I have been watching youtube tutorials, doing exercises on Code Academy and following The Odin Project. Recently I came up with a project for myself but was having difficulty getting started, so I came up with an idea of making prefab website sections. For an instance, this thread will go over one of the few prefabs that I have already made, a login form.

The purpose of these prefabs is to help me build website templates quickly and efficiently. I simply just grab the code and plop in the template that I am working on. It may not work for everyone but I really find this helps me with keeping my HTML/CSS skills sharpened and helps me keep my motivation to work on various projects.

Now I would like some help in seeing what I can do to improve my code, e.g. code formatting, more comments, other solutions etc.

<link href="css/stylesheet.css" rel="stylesheet">
<div class="loginContainer">
   <form class="loginForm">
      <div class="loginCredentials">
         <label for="usernameEmail">Username or Email</label>
         <input type="text" id="usernameEmail">
         <label for="passwordField">Password:</label>
         <input type="password" id="passwordField">
         <span class="forgotPasswordText">
            <a href="#">Forgot your password?</a>
         </span>
      </div>
      <div class="loginRegister">
         <input type="submit" value="Login">
         <input type="submit" value="register">
      </div>
   </form>
</div>

input {
    display: block;
}
.loginRegister > input {
    display: inline-block;
}

GitHub - malcolmjr96/login

Contribute to malcolmjr96/login development by creating an account on GitHub.

github.com

 

[Mutiny]

A couple of things come to mind. First issue I see is that unless you have some way of loading the components in isolation (for instance, what Vue.js does with its components) you're going to get CSS collisions when you have more than one component on the page. You might have a different input in a different component that has a style you don't want to apply to the login form and unless you're careful when writing your CSS rules it will be tricky tracking down where the style collision is.

My recommendation is that you look into a CSS pre-processor like SASS. What you can do is wrap all of the CSS for your component inside of a container CSS rule, like this:

.loginContainer {
    input {
        display: block;
    }
    .loginRegister > input {
        display: inline-block;
    }
}

Another thing is that your CSS classes are camel-case whereas I believe a more common convention is dash-case. So, loginContainer becomes login-container. I think CSS is done this way partly to avoid confusion with Javascript function names and partly for readability. Nothing technically wrong with this, just a non-standard convention.

If you really want to take things up to the next level, you can add a dynamic language such as PHP into the mix, so instead of copying and pasting a component, you can just do a PHP includes and insert your component between the rest of your code on your site's template. This would allow you to have a git repo of components you just import into any new project. If you add in Laravel Blade Templates things can get even more cool.

 

[Malcolm]

A couple of things come to mind. First issue I see is that unless you have some way of loading the components in isolation (for instance, what Vue.js does with its components) you're going to get CSS collisions when you have more than one component on the page. You might have a different input in a different component that has a style you don't want to apply to the login form and unless you're careful when writing your CSS rules it will be tricky tracking down where the style collision is.

My recommendation is that you look into a CSS pre-processor like SASS. What you can do is wrap all of the CSS for your component inside of a container CSS rule, like this:

.loginContainer {
    input {
        display: block;
    }
    .loginRegister > input {
        display: inline-block;
    }
}

Another thing is that your CSS classes are camel-case whereas I believe a more common convention is dash-case. So, loginContainer becomes login-container. I think CSS is done this way partly to avoid confusion with Javascript function names and partly for readability. Nothing technically wrong with this, just a non-standard convention.

If you really want to take things up to the next level, you can add a dynamic language such as PHP into the mix, so instead of copying and pasting a component, you can just do a PHP includes and insert your component between the rest of your code on your site's template. This would allow you to have a git repo of components you just import into any new project. If you add in Laravel Blade Templates things can get even more cool.

Wow! Thanks a lot.

Honestly, I never thought about the CSS collisions. I really appreciate this reply, lots of constructive feedback.

For the SASS CSS pre-processor I have a few questions:

• Would I need to download the library or do I just link to their CDN?
• In what other circumstances would I be able to use SASS?

By the container around the child selectors, does that essentially prevent CSS collisions?

It's funny that you mention my CSS classes are camel-case because the other day I was questioning if I should add a dash in between them. I ended up settling with the camel case, but thank you for letting me know about the conventional way! It's great that you caught this for me now, probably would have run into some issues in the future when I do add JavaScript.

I think that's something I definitely want to try for sure. I dove into something similar to this not too long ago, I was trying to figure out a way to include templates into my main template. It worked semi-okay but had a few problems with that too lol.

Again thank you so much for the feedback!

 

[Mutiny]

For the SASS pre-processor, you need a program that can compile your SASS code into plain CSS the browser can understand. There are a few ways to do that, but I use gulp. Here's a good article that should help you get gulp installed with SASS so you can compile your CSS.

With the container around the component as well as a container class around your component's SASS code like in my previous example, it prevents CSS collisions. What that wrapper does is essentially make every rule in your SASS file be prefixed by the class of your component's container, eg the following SASS code:

[CODE lang="css" title="SASS Code"].login-container {
input {
display: block;
}

.loginRegister > input {
display: inline-block;
}
}[/CODE]

When compiled will look like:

[CODE lang="css" title="Compiled CSS Output"].login-container input {
display: block;
}

.login-container .loginRegister > input {
display: inline-block;
}
[/CODE]

As far as what else you can do with SASS, there's a lot. There's variables so you can set your fonts, colors and widths in one place instead of always repeating them and there's also mixins, which are little functions that you can call to reuse blocks of CSS throughout your project.