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.
No description
51 Replies
Azyrum
Azyrum13mo ago
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
Azyrum
Azyrum13mo ago
V3X4TI0US
V3X4TI0US13mo ago
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
Azyrum
Azyrum13mo ago
You can wrap one of them in another span and give it a classname
ἔρως
ἔρως13mo ago
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
V3X4TI0US
V3X4TI0US13mo ago
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
ἔρως
ἔρως13mo ago
holy god
Azyrum
Azyrum13mo ago
<span>Issues: <span class="something">${item.issues}</span></span>


<span>Issues: <span class="something">${item.issues}</span></span>


V3X4TI0US
V3X4TI0US13mo ago
so i tried to lower the no of elements.
ἔρως
ἔρως13mo ago
span .title, span .spans ... just use a <b> or a <strong>, depending on the emphasis you want to give to a screen reader
V3X4TI0US
V3X4TI0US13mo ago
so 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?
ἔρως
ἔρως13mo ago
no
V3X4TI0US
V3X4TI0US13mo ago
this way i cut off extra classes?
ἔρως
ἔρως13mo ago
im saying, use a <b> tag for the name and the : or use the <b> tag for the number
V3X4TI0US
V3X4TI0US13mo ago
ohh, okay. and for styling them i could simply do article b {my styles}
Azyrum
Azyrum13mo ago
yes
ἔρως
ἔρως13mo ago
i would use it for the number, and the .spans would have the "general" styles then you can do .spans b and style it
V3X4TI0US
V3X4TI0US13mo ago
yeah i got the idea. yes understood.
ἔρως
ἔρως13mo ago
there's no reason to complicate it
V3X4TI0US
V3X4TI0US13mo ago
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?
ἔρως
ἔρως13mo ago
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
V3X4TI0US
V3X4TI0US13mo ago
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.
ἔρως
ἔρως13mo ago
it means absolutely nothing at all, and that's very good in many situations
V3X4TI0US
V3X4TI0US13mo ago
yes understood.
ἔρως
ἔρως13mo ago
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
V3X4TI0US
V3X4TI0US13mo ago
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.
ἔρως
ἔρως13mo ago
dont think an h3 is a good idea
V3X4TI0US
V3X4TI0US13mo ago
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
ἔρως
ἔρως13mo ago
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
V3X4TI0US
V3X4TI0US13mo ago
yeah, i was surprised how much it changed and how smooth things are now. I learned and implemented grids
ἔρως
ἔρως13mo ago
sometimes, it is really better to stop, rewind and restart
V3X4TI0US
V3X4TI0US13mo ago
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
let item = document.querySelector(".item-3")
const renderCards = () => {
let html = ""
dummyArray.map(item => {
html += `
<article>
<div class="card-info">
<span>${item.name}</span>
<span>Stars ${item.stars}</span>
<span>Forks ${item.forks}</span>
<span>Issues ${item.issues}</span>
</div>
<div class="card-description">
<p>Description: ${item.description ? item.description : "No description"}</p>
</div>
</article>

`
})
item.innerHTML = html
}

renderCards()
let item = document.querySelector(".item-3")
const renderCards = () => {
let html = ""
dummyArray.map(item => {
html += `
<article>
<div class="card-info">
<span>${item.name}</span>
<span>Stars ${item.stars}</span>
<span>Forks ${item.forks}</span>
<span>Issues ${item.issues}</span>
</div>
<div class="card-description">
<p>Description: ${item.description ? item.description : "No description"}</p>
</div>
</article>

`
})
item.innerHTML = html
}

renderCards()
here, i just need to implement <b> for either key and value
ἔρως
ἔρως13mo ago
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
V3X4TI0US
V3X4TI0US13mo ago
for each span i would use general styling and for different ones, i will use the b tag selector okay got it.
ἔρως
ἔρως13mo ago
for that, i would recommend a specific class to specify what type of thingy it is otherwise, you will have some brittle js
V3X4TI0US
V3X4TI0US13mo ago
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.
ἔρως
ἔρως13mo ago
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
V3X4TI0US
V3X4TI0US13mo ago
yeah i understand, thats y i asked u now.
ἔρως
ἔρως13mo ago
i prefer if you just make a post, i check them when im not tired
V3X4TI0US
V3X4TI0US13mo ago
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.
ἔρως
ἔρως13mo ago
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 it
V3X4TI0US
V3X4TI0US13mo ago
ohh, i was thinking since i am wrapping the key which in this case is star inside the b tag, i will simply do
.spans b { color : red }
.spans b { color : red }
. and
.spans{ generic styles}
.spans{ generic styles}
this way, i dont have to define any classes. Thats what i thought.
ἔρως
ἔρως13mo ago
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
V3X4TI0US
V3X4TI0US13mo ago
i am using a span to wrap each key and value and a b tag to wrap the key. Simple as that.
ἔρως
ἔρως13mo ago
i know
V3X4TI0US
V3X4TI0US13mo ago
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
ἔρως
ἔρως13mo ago
no, i mean a <template> tag not a template string that's terrible
V3X4TI0US
V3X4TI0US13mo ago
ohhh i misunderstood u
ἔρως
ἔρως13mo ago
it's fine working with a template tag is weird, but has incredible advantages and you should take advantage of it
V3X4TI0US
V3X4TI0US13mo ago
yes i will do some research on it now.
ἔρως
ἔρως13mo ago
you should
Want results from more Discord servers?
Add your server