How to write CSS for an arbitrarily long page

HTML & CSS
1

I know how different CSS rules and facilities work but I don’t know how I can write a CSS that is convenient for any arbitrary amount of html data and can be easily “repeated”. For example, I want to write CSS for a box in my aside section, or a box in my content section, and then when I need another one, I just change html and not my CSS anymore.

Here I’ve made a page:

For example, when I copy/paste the div with “aside” class in my HTML more than two times, the footer does not move, or when I add another copy of the div with “content” class, everything goes out of shape.
Could you please tell what my mistakes are that cause this? What are the tips that I should notice from scratch when I want to start writing my CSS so that this doesn’t happen later on?
Thank you.
(I also Googled with different keywords and found no good guide on this)

2

So long as you’re applying the same classes to the additional content, generally speaking, the CSS should be applied in the same way - that should work fine for things like colours, fonts, line spacing and so on. It becomes more difficult when dealing with positioning though, where it could lead you to overlaying one element over another of the same class.

Just one note on Codepen though, you don’t need to include the following HTML sections in a Pen; Codepen takes care of that part for you.

<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width:device-width,initial-scale:1"/>
  <title></title>
</head>
<body>

Only include the content found within the <body> tags

</body>
</html>
1 Like
3

Thanks for the tip about codepen.

It becomes more difficult when dealing with positioning though, where it could lead you to overlaying one element over another of the same class.

Yes I see, but there must be a starting point for me to learn to get around this issue.

4

I’ve just taken a closer look at the CSS and I see you’re using a grid layout. That’s something I have no practical experience of to help in any meaningful way. What I am seeing though, is a lot of CSS properties that look like this:

grid-template-rows: 150px minmax(300px, auto) 100px;

So I’m wondering whether you’ve managed to constrain the height of the container you’re placing the asides in. I did try duplicating a couple of the aside blocks, and you can see, in the console, that they are overlaying each other.

1 Like
5

This is likely as a good a start point with CSS Grid as you’ll get - https://gridbyexample.com/

1 Like
6

You need to take a course on basic css and html so that you understand how css works and interacts with the html. It looks as though you have copied and pasted the code in your codepen as that uses some of the latest css features such as grid. There are many courses and tutorials about (some on Sitepoint) so I’m not going to google them for you :slight_smile:

Without at least a basic understanding of how CSS works you will not achieve the modularity you are looking for. You can’t really just copy blocks of code that contain positional information unless you are reproducing the exact same structure somewhere else and you copy the exact html that makes the original work.

You can create re-usable elements but generally that would be simple things like borders, colors padding and some fluid positioning within that context. Due to the Cascade (CSS) you can’t actually drop code into different contexts easily because the element will inherit certain styles from the new context that may be different from its original position.

There are some advance CSS properties on the horizon that will allow more modularity to avoid cascade issues but not yet ready for prime time. However, for most normal web use you don’t really need to go to those lengths if you have control over the whole page and create pages sensibly. (Third party plugins obviously could do with being isolated from inheritance but generally it is not a problem on most general sites).

For something like the blue box you show in your side-menu then you could make that mostly re-usable and copy and paste. However you would only copy the menuitem and not the whole aside code as that is too specific.

For re-usable elements you do not want to tie them to specific locations. e.g. you have the menuitem code only available inside the aside class.

i.e.

.aside .menuItem{}

That immediately makes it unusable anywhere else unless you also copy all the aside divs with it and then you are into a different structure as the aside class has a grid structure that obviously only works for the side column. You should have created the class like so instead.

.menuItem{
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,191,255,0.7);
  color: white;
  box-shadow: inset 7px 0px 1px 0px green;
}

Now you can just copy the menuItem div and re-use it elsewhere with minimum effort (bearing in mind any cascading or inheritance issues already mentioned).

Hope that helps :slight_smile:

6 Likes
7

Paul I’m indebted to people like you because you always answer my questions so patiently but

It looks as though you have copied and pasted the code in your codepen

Really I’ve written every single letter of it myself. I know it’s not a piece of art but it’s not a copy either at all. I read about CSS grid from here(http://learncssgrid.com) and loved it so started making one template with it using my own IDE, then when wanted to ask this question I put it in the codepen.
Thank you for the tip you’ve recommended. I appreciate it.

1 Like
8

Ok, sorry, that’s good :slight_smile:

However if I were learning css today grid would be way down my list of things to learn right now. It’s good to have an idea of what grid can do and how it will help in laying out pages but you do need to have a deeper understanding of the css basics before you can bend it to your will.

Remember that CSS grid is more for creating a structure that you can work inside so you still need all the other tools available as that will be what you are using inside your grid sections. Grid create a relationship between rows and columns and once you’ve designed that then you won’t need to repeat any code that uses grid unless you have the same exact structure inside one of the grid cells and that is pretty much unlikely.

By all means play with grid but please brush up on specificity, inheritance and the cascade at the same time so that you can make rational choices about your code.

Your original question seemed to be about re-using styles and that would unlikely be to include the grid properties as they are specific to one task and would very seldom be re-usable in another situation. On the other hand the menuItem code example I showed you could be moved around with little effort because it does not relate to a specific structure.

If you still need help with a specific problem or the above hasn’t answered your question then fire away. :slight_smile:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.