Pure CSS and HTML Creating Layout and naming elements
Hello I have been starting to use pure CSS more often recently and I want to know if there is a specific guideline used when creating the structure, for example if we use bootstrap we have the order of container>row>col l like that. Is something like that needed here.?
Secondly, when we are writing, is it good to write CSS for all rows and columns generally or style each row with its own unique class.?
Thank you
12 Replies
for the first part, since you're using "pure css", you can do whatever you want
the only "rule" is to make it readable and maintainable
and for the 2nd one, the only answer is "whatever makes more sense for the layout"
This is kinda Kevins newest version of what I use.
I have a reset layer then a layer with some utility classes for row col gap grid container(inline-size) wrapper etc.
It does depend on your layout, your habits and preferences, your workflow, etc.
I'm probably doing it backwards as I've noticed that convention is reset, [...other layers], component, then utilities. But I've always swapped reset , [...], utilities, components. In my perspective, utilities apply common styles like display , uppercase, lowercase, underline, small , etc and then components get more specific, a background color or keyframe animation or specific padding; maybe need adjustments in media queries to go back to display: block or need to wrap etc.
So my point is rules are meant to be broken. You should know it exists and why you're breaking it though. If we all did everything the same, the web would be so boring. That's why i consider its an art and a science🌟
Also as far as naming, nesting makes that much easier. Very divisive though, some ppl love it and some ppl despise it. And scope will too when it's ready!
how do you come up with the class names
lets say you add another part how will you make the name
if we wan to write reusable css
like do you make a flex class , center class like that and re use it. i kind of do that with SCSS. Normally like in a website section people use a row inside the section with cols ( the grid system) do you use that if you use vanilla css. i know its pretty much up to us but i would like to hear what others use
I’ll have a .row {display: flex;} .col {display: flex; flex-direction: column ;} but if I need a column I usually use .grid {display: grid;} then I have all the alignment utilities .Jc-cen .jc-sb. jc-start etc ai-cen ai-start ai-end etc .ac-cen .ac-sb .ac-end etc
So some utility classes like tailwind works but I’ve got a mix going on with some utility classes to keep from having to make a class for setting the stage esp if it’s just for layout. Pulls it together quicker . Then for things that need more properties like padding border radius bg colour I try to give a meaningful class or use an ancestor to select it or a :has()
I’m still finding and building the right workflow and not totally sold on this mrthid tbh, it gets messier than id like. I can’t stand Tw and repeating the same classes in everything but i do like how quick it is to create the layout. but also depends on the project im working on, if its personal, if its a team, or theres the possibility someone else will need to read it or work on it i would be very conservative with utilities.
You could go through codepens and take a look at all kinds of code . Or through iCodeThis to practice . They have several cool things on the site but the basic idea is they give you a reference design image and you code it , you could try to match it or just use it as inspiration for whatever comes to you. Can also make it functional with JavaScript but not everyone does
After you submit a challenge , you’ll be able to see how everyone else approached it and review their code
iCodeThis
Projects to improve your coding skills!
that sounds nice , the thing is once we get used to a framework we tend to continue with that flow , so since i worked with bootstrap a lot i inherited its grid system even when i go with pure css , but i tend to experiment on full grid layouts as well . well many companies as far as i know follows some ui library where it limits us from using the real power of css
There is no standard, but this is a popular approach: https://getbem.com/introduction/
BEM — Block Element Modifier
BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.
BEM is terrible imo
I'd use Cube before following BEM https://cube.fyi/
CUBE CSS | CUBE CSS
A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.
wow i been using bem so far some times
https://www.youtube.com/watch?v=NanhQvnvbR8&pp=ygUVa2V2aW4gcG93ZWwgY3ViYmUgY3Nz
perfect time to learn cube
Kevin Powell
YouTube
A look at the CUBE CSS methodology in action
There are a lot of different approaches to writing CSS, with CUBE CSS by Andy Bell being one of the newer methodologies out there. I get a lot of questions about it, so in this video I look at coding up a Frontend Mentor project using the CUBE CSS approach.
🔗 Links
✅ CUBE CSS Documentation: https://cube.fyi/
✅ The Design I'm working on: htt...