Need help with styling specific tags/elements
So, i did achieve this design but now i was implementing it in a better way using grids and relative units to avoid breaking and too much wrapper divs.
The screenshot i shared is the design i created using flexbox and not best practices. But it is the actual design.
Here is the codepen of what i am trying to do now :
https://codepen.io/Zeshan-Merchant/pen/NWeQpZW
Inside this codepen's javascript, there is a dummyArray of objects, which i am supposed to iterate and display the values inside my cards.
The javascript code is of my old design just to give you guys the idea, how i was displaying the data.
Now, i used to append a lot of divs, like as you can see, there are bunch of key:value pairs inside the card/article. My question is, without using so much of spans and stuff, how can i style the key and values differently? In my old version, i used so many classes to style them but i got some advice from some people saying that its not a good practice. I was able to cut off the excess wrapper divs but now i am confused how should i style the key differently and value differently? What i am thinking is to add them in seperate spans but then it would be spans inside of spans.
What i am trying to achieve is the screenshot design but in a better way, also i am going to use the same array of objects.
Is it possible to style the key value differently without adding too many elements through javascript?
Also, the html inside my codepen is what the actual structure of the cards will look like after the displayData function runs. If i can use any other tags instead of spans, do let me know.
51 Replies
Hey, instead of mixing normal html and javascript to fill the the "spans" and just spam createElement, you could use template literals to do the articles
So you mean give the html structure inside the javascript. So it becomes one function. Yeah it does look less spammy and its not repetitive
@Azyrum and what about styling the key value pair seperately? Becoz if i style my span element inside the css, it will give same styles to both the key and value. But i want to style them differently
@ἔρως if you could help, it would be great. And i dont want to tag again and again but its not a whole different problem, i have optimized some of the part. So if you would like to help, it would be nice
You can wrap one of them in another span and give it a classname
well, for the big question, you can just use a span
you could use a class name, but don't think it is needed
it doesn't hurt, if it is appropriatedly classed, but it is the only child in that element, so
this is what my last solution was but i got advice from multiple people that its not a good practice
previously my html looked like this after the cards were created
div
then 5x divs inside that div
each div with one span and each span with another two spans
holy god
so i tried to lower the no of elements.
span .title, span .spans ...
just use a
<b> or a <strong>, depending on the emphasis you want to give to a screen readerso you mean i should use the nth child considering my new html structure and then for styling the key : value pair only add either the key or value to a span and then style it?
no
this way i cut off extra classes?
im saying, use a
<b> tag for the name and the :
or use the <b> tag for the numberohh, okay.
and for styling them i could simply do article b {my styles}
yes
i would use it for the number, and the .spans would have the "general" styles
then you can do
.spans b and style ityeah i got the idea.
yes understood.
there's no reason to complicate it
and span is a good tag to use for normal text rights? in terms or semantics? or i should do more research on html semantics?
span it good for when you want to do something to a span of text
almost all elements are "good to use for normal text"
but is that the right way to use them? nope
but span has an interesting "power": it has no semanting meaning what-so-ever at all
alright, i will still look for more meaningful ones, like u said earlier, i figure out that my page will have more meaningful structure this time.
it means absolutely nothing at all, and that's very good in many situations
yes understood.
in your situation, i wouldn't use a span for the titles
but honestly, im not exactly sure of what would be best to use, besides divs
regarding that, i used an h3, but i was struggling with the padding, it was only taking space upto my text.
then i shifted my title to span with class title.
dont think an h3 is a good idea
hmmm, okay so i will do some more research with the semantics, so far i did improve in terms of layout and reduced things as much as i could.
Thanks a lot both of you
you're welcome
i do see that the layout isn't as brittle as it used to be, and starting over really was a good idea
yeah, i was surprised how much it changed and how smooth things are now.
I learned and implemented grids
sometimes, it is really better to stop, rewind and restart
also, this works right ?the solution which azyrum gave? i personally feel like its way better than my original way to add elements in html via js
here, i just need to implement <b> for either key and value
not only works, but you're using the right element for it's job
if you use a template, that is
you then just target the elements you need and change the text
for each span i would use general styling and for different ones, i will use the b tag selector
okay got it.
for that, i would recommend a specific class to specify what type of thingy it is
otherwise, you will have some brittle js
also, if i need any help from you, can i tag u anywhere or should i wait for u to see my post. This time, I asked becoz it was kind of related with the help u gave me last time.
Becoz tagging was not good i realised.
just make a post, and if im not tired, i will answer
or others will
nothing against you, but, if i let you ping me, then let abc ping, then xyz, then ybg, then rgb, then uim, then ... and then ... and i can't be on discord or i will be pinged all over
yeah i understand, thats y i asked u now.
i prefer if you just make a post, i check them when im not tired
i think i will leave this over my tag selectors, becoz then again, additional classes will be added.
okay i will keep this in mind.
what i was saying was
.spans.stars for example
or .spans__stars, if you like that
you will need to target the stars element, and then you need to edit the text content for itohh, i was thinking since i am wrapping the key which in this case is star inside the b tag, i will simply do .
and this way, i dont have to define any classes. Thats what i thought.
if you decide to implement it with a span and a class, for you to write the text inside, it may make the css selectors easier in javascript
you can do that, definitively
but remember to use a template as well, if you want to add stuff
i know i said to use an article, previously
i am using a span to wrap each key and value and a b tag to wrap the key. Simple as that.
i know
u mean a general template for my cards inside javascript? well i am looking for more semantic elements which could do. And the template which azyrum gave is a basic one. I will do something more semantic and which fits to my design well.
his idea was good as i dont have to repeat stuff.
Alright then
no, i mean a
<template> tag
not a template string
that's terribleohhh
i misunderstood u
it's fine
working with a template tag is weird, but has incredible advantages
and you should take advantage of it
yes i will do some research on it now.
you should