Whether you are a freelance web developer, work on a team, or just starting out with web development, you might have wondered if there was an easier way to build websites that don’t just look good from the front-end, but are also clean and concise in the back-end. It’s easy to slap some code together and hope that no one else has to touch it ever again (I am just as guilty of this), but I’m here to tell you that there is a better way to organize your code so that you are building websites efficiently while also keeping it easily editable for you or any other developer that might come in contact with your project. Read on for 8 steps to structuring HTML and CSS in a web project.
TIP: If you need to brush up on your HTML and CSS, visit W3 Schools for detailed tutorials on all the basics.
1. Set up your foundation
By default, HTML elements have inherent styling such as padding and margin that could cause some issues for you as you code your website. Use this block of code to get rid of that default styling to give yourself a blank canvas to work with:
* {
padding: 0;
margin: 0;
max-width: 100%;
overflow: hidden;
position: relative;
}
The * symbol represents all HTML elements on the site. Including this at the top of your stylesheet is important so that if you have to add styles to an element later that the new style rule below overrides the style rule at the top. For example, if I want to add margin to an element on the page, I would add this rule below the ruleset that will reset all defaults so the new ruleset overrides the previous one:
.element {
margin: 20px;
}
Now the element with the class name element will have a 20-pixel margin all around.
2. Create CSS Variables
One thing that often gets overlooked in CSS is the power of variables. Variables make it easy to assign values for things that you would otherwise write over and over again. You can assign any type of value to a CSS variable, but the few I like to use them for specifically are: hexadecimal colors, font families, and font weights. These are typically the things that I find myself writing over and over again, and most of the time I can’t remember color codes and font specs off the top of the dome. Here’s how to set CSS variables in your stylesheet globally:
/* Variables */
:root {
--primary-color: #50330C;
--accent-color: #68BA84;
--offwhite-color: #F8F8F8;
--white-color: #FFFFFF;
--text-color: #939393;
--font-main: 'Poppins', sans-serif;
--font-weight-light: 300;
--font-weight-medium: 500;
--font-weight-semibold: 600;
}
Using the :root selector, we can store all of these variables in the root of the document for use from anywhere in the CSS. This list of variables will also conveniently show up in your browsers Dev Tools window in the Styles pane. Chrome is my preferred browser and to open Dev Tools in Google Chrome, right click anywhere on your site and click “Inspect.” You should now see the list of HTML elements in the DOM as well as a sidebar on the right to browse through your CSS Styles.
TIP: Test out your styles on the fly within the Dev Tools window before adding them into your project to get a live preview of how those styles would look when applied to those elements.
Now that you have your variables set, it’s time to use them in your CSS code. In the code snippet below, I am applying the accent color variable to all the <h1>’s on the site to change the text color:
h1 {
color: var(--accent-color);
}
Using the var()
function, we can insert a CSS variable as a value next to the property that we are styling. That way as we are building the site we don’t have to worry about remembering the hex code for that color every time we want to use it. In addition, if we need to globally change the hex code for any color we can achieve this just by changing the value of the variable in the :root selector. Pretty cool, right?
3. Configure “ready” classes
When building a site, I always like to start by establishing the repeating elements of a site, and storing the styles in a class in order to use them on block elements wherever I need to apply those styles. I like to call these “ready classes” — because they are ready to be added to anything we want! Pre-defining styles like this helps streamline your workflow and reduce the amount of clutter in your stylesheet. My rule of thumb is if an element in a design is repeated more than once, then the CSS used to style that element gets thrown into a unique class. A great example of a universally-used element on any website is a button.
Other things like widths, Flexbox properties, text alignment, text colors, typography, and so on can also be added into a ready class. See the code snippet below for my ideal ready class set-up (beware, its a long list!):
/* Button */
.btn {
display: block;
padding: 25px 40px;
text-align: center;
min-width: 140px;
font-size: 14px;
line-height: 30px;
font-weight: var(--font-weight-medium);
color: var(--white-color);
background: var(--accent-color);
transition: 0.4s all ease-in-out;
}
@media (hover: hover) {
.btn:hover {
background: var(--primary-color);
}
}
.btn-wrap {
display: flex;
margin-top: 30px;
}
/* Typography */
body {
font-family: var(--font-main);
}
h1 {
font-size: 43px;
line-height: 51px;
letter-spacing: 0;
color: var(--primary-color);
font-weight: var(--font-weight-semibold);
}
h2 {
font-size: 33px;
line-height: 45px;
letter-spacing: 0;
color: var(--primary-color);
font-weight: var(--font-weight-semibold);
}
p {
font-size: 14px;
line-height: 30px;
letter-spacing: 0;
color: var(--text-color);
font-weight: var(--font-weight-light);
}
/* Responsive - Medium Tablet */
@media only screen and (max-width: 991px) {
h1 {
font-size: 32px;
line-height: 42px;
}
}
/* 3. Ready Classes */
/* Flexbox Ready Classes */
.flex {
display: flex;
}
.flex-sb {
justify-content: space-between;
}
.flex-ac {
align-items: center;
}
.flex-jc {
justify-content: center;
}
.flex-ae {
align-items: flex-end;
}
.flex-je {
justify-content: flex-end;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
/* Width Ready Classes */
/* 20% wide */
.twenty {
width: 20%;
}
/* 25% wide */
.twenty-five {
width: 25%;
}
/* 30% wide */
.thirty {
width: 30%;
}
/* 35% wide */
.thirty-five {
width: 35%;
}
/* 40% wide */
.forty {
width: 40%;
}
/* 45% wide */
.forty-five {
width: 45%;
}
/* 50% wide */
.fifty {
width: 50%;
}
/* 55% wide */
.fifty-five {
width: 55%;
}
/* 60% wide */
.sixty {
width: 60%;
}
/* 70% wide */
.seventy {
width: 70%;
}
/* 75% wide */
.seventy-five {
width: 75%;
}
/* 80% wide */
.eighty {
width: 80%;
}
/* 100% wide */
.full {
width: 100%;
}
/* Containers */
.container {
width: 100%;
max-width: 1350px;
margin: 0 auto;
padding: 100px 50px;
}
.container-large {
width: 100%;
margin: 0 auto;
padding: 0 50px;
}
@media only screen and (max-width: 1070px) {
.container {
padding: 50px 20px;
}
.container-large {
padding: 0 20px;
}
}
/* Background Colors */
.bg-white {
background: var(--white-color);
}
.bg-offwhite {
background: var(--offwhite-color);
}
.bg-primary {
background: var(--primary-color)
}
.bg-accent {
background: var(--accent-color);
}
/* Text Colors */
.tc-wht {
color: var(--white-color);
}
.tc-prim {
color: var(--primary-color);
}
.tc-acc {
color: var(--accent-color);
}
/* Text Alignment */
.ta-center {
text-align: center;
}
.ta-right {
text-align: right;
}
I know what you’re thinking… Why not just use bootstrap? Ah. The age-old question that I get asked a lot. The answer I give everyone is: there is nothing wrong with bootstrap if that is what you are comfortable using. My issue with bootstrap is there is a lot of CSS bloat that could be simplified; and well, this is my simplification of it.
4. Use Flexbox to your advantage
The first thing I tell new web developers to learn is the art of Flexbox. Once you have a good understanding of how the properties work, you can do some really cool things with it. Flexbox makes it easy to create responsive webpages without using float or positioning. In addition to its layout benefits, Flexbox is supported in all modern browsers. Double-win! Our favorite game for learning Flexbox is Flexbox Froggy because it is a great way to visually understand the power of Flexbox. After you master Flexbox, developing responsive websites will become a breeze — especially if you utilize the Flexbox ready classes that are included in tip #3.
5. Write your HTML with responsive in mind from the beginning
These days, we almost never go anywhere without our mobile devices. Honestly, I owe it a lot to my full-time desk job for the time I spend browsing the Internet on an actual desktop computer. My phone — like many others’ — is how I carry out most of my tasks on the Internet. From refilling a prescription, to ordering dinner, to WebMD’ing my symptoms because a sudden change in how I’m feeling definitely means my time is up… my phone is my ride or die. This is the case for most people who are on the internet every day across the planet. That means visitors who reach your site are most likely going to be on their phone or other mobile device, so making sure that your website looks great on smaller devices is super important. Below, I have a few tricks for making sure you are setting yourself up for success from the beginning.
See the Pen
Hero Banner Section by Missy (@missyturco)
on CodePen.
In this example, you can see that this banner section is wrapped in a <section> tag. I like to do this for visual organization both in the code and in the DOM so it is easy to point out each section on the page. Next up is the <div> with the class “container.” This is the universal container class that will ensure the margin for each section containing content won’t span to the edge of the screen. It is vital that this class is not altered specifically within each section as any slight modification might end up causing spacing inconsistencies when the site is viewed on smaller screens. Within the container is where I can now add the elements that are specific to this section. In this case, it is the <h1> (note: we are using the “tc-wht” ready class that we set up earlier to change the text color to white without having to add another line of CSS) and the button (with its ready class as well) that are both wrapped in a “text-wrap” container that has a max width to prevent the text from getting too long.
<section class="hero-banner-section flex flex-ac">
<div class="container">
<div class="text-wrap">
<h1 class="tc-wht ta-center">Welcome to my super cool website about avocados!</h1>
<div class="btn-wrap flex-jc">
<a href="about.html" class="btn">Read More</a>
</div>
</div>
</div>
</section>
After our structure is all set up, it is time to add some CSS to make it look like what we want.
/******************************************************/
/******************************************************/
/**************** HERO BANNER SECTION *****************/
/******************************************************/
/******************************************************/
.hero-banner-section {
background: url(images/hero-bg.jpg) no-repeat center / cover;
height: 50vw;
max-height: 700px;
min-height: 300px;
}
.hero-banner-section .text-wrap {
max-width: 588px;
margin: 0 auto;
}
/* Responsive - Large Tablet */
@media only screen and (max-width: 1070px) {
.hero-banner-section {
height: auto;
}
}
/******************************************************/
Setting a height to the section using a unit called “vw” will allow the banner to respond in height as the window width gets smaller or bigger. Pairing this with a min-height and a max-height will prevent the height of this section from getting too small or too big. I then like to add my media queries directly below the desktop styles for that section to keep all the CSS for that block in one general area to make editing later a breeze.
6. Use comments in CSS to make finding code a breeze
Adding comments to your code to describe what you are doing is generally a good practice in all development languages. This makes it easy for other developers to read and navigate your code as well if you are working on a team. In the example code above for the hero banner section, you see that we have a clear indication of where the CSS starts and ends for the section with use of the *’s in the CSS comment.
7. Adopt a naming convention and stick to it
Trust me, I know how it feels when you are in the beginning stages of your code project and you have no idea what to name your syntax. There’s nothing worse than having momentum when coding and something as simple as creating a class for a new section has you staring at your screen and pretend-typing for longer than you wanted to. That’s why it is important to adopt and utilize a naming convention that makes sense to you and the application of your code. Try using the same “template” in your classes. For example, when I develop a website, I use the <section> tag as an outer container and on that tag I like to create a generalized name for what the section is or looks like plus a “-section” after. If it is a section that has a block of text and a block for an image, I would call it text-image-section. That way, as I am reading through my code I know for sure that if I see “-section” at the end of a class that this class is for an outer section container.
Make sure when you are naming your classes that you check your spelling. There is nothing worse than wondering why a style is not being applied properly to a class you thought you named “dessert” when you actually named it “desert” by mistake. Not so sweet if you ask me.
8. Clean up your code when the project is “finished.”
It’s easy to brush off your hands and never look back once you have achieved the look of the website that you were going for on the front end. However, if you have the time to spare I recommend going back through all your code and cleaning up anything that doesn’t need to be there. Examples of things you can clean up include commented out code that is no longer being used and duplicate CSS rules. The goal is to pretend like you were sending your code to another developer to review and make changes, and to not make them hate their life by the end of it.
If you follow these steps for code organization, you should be well-equipped with a great structure to help you build websites more efficiently.