I'm finding in several places the use of a single class for a single css attribute. The result is something like this:
<header>
<h1 class="secondary-text-colour heading-large">#Messages("xxx")</h1>
<span class="secondary-text-colour heading-small">#Messages("xxx")</span>
</header>
We can see how heading-large is only used for setting the font size or primary-text-colour is used to set the colour of the font.
My idea of good design would be something like:
<header>
<h1 class="header-main">#Messages("xxx")</h1>
<span class="header-subtitle">#Messages("xxx")</span>
</header>
In this second scenario you define a class for your element and you define the style with the css.
I sincerely think that this is how css and classes should be used but I need formal explanation to defend it in front of other team members. Can anyone give me any feedback on this?
This is exactly how classes should be used. They provide a semantic layer of abstraction to the reader of the HTML. I would encourage you to read this book about SMACSS it provides a great understanding of CSS architecture in general.
EDIT
Your idea is less modular than the original approach, see the SMACSS book for more information on this topic. Maybe you would like to change the color of this new headline, but still have the same font as in all other headlines. If you have one selector for each you would have to change both places if the font changes later. This gets even harder if you have large stylesheets and searching each position in the styles which would be needed is much harder than writing two classes in fist place.
As an example... You have a very big project whith a design that requires many boxes with a box-shadow.
If You have to copy and paste:
-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
for every container class that is going to have the shadow you are adding hundreds of unnecesary lines to your css sheet. But if you just add a single class like:
.shadow {
-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
}
You just need to add the class to whatever container needs the shadow in the html.
Faster, cleaner, easier.
Related
Hello i'm creating a webpage from scratch and I'm running into a problem
I know using the style tag is not very good, but would it be in this case okay to use? or maybe is there a better way of doing it?
let's say I have this CSS
.group-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: rgba(30,30,30);
padding: 15px;
height: 100px;
border: 1px solid rgba(10,136,0, 0.2);
}
and I have
<div class="groupbox"></div>
but now let's say I wanted to make my groupbox bigger for one-time use, is it okay to do?
<div class="groupbox" style="height: 300px;"></div>
or should I just make a whole separate class like a small-groupbox and a big-groupbox with all the same properties, just different heights values? I'm leaning more towards the style attribute. But maybe there is a better way?
I am wondering what the CSS "coding" standard would say about this question. my question is subjective, but I want to know what most others who are more experienced at CSS would do in my situation.
Thanks
It totally depends on ‘your situation’. In particular considering maintainability/readability for future developers. There can be no one right answer. Both methods are allowed by the standard.
The thing to watch if using classes is cascading/specificity which you can be confident are dealt with if using style.
But set against that is the ability in a stylesheet to use class names which have meaning. And there is true separation between styling and semantics, the styling not being ‘buried’ amongst HTML. You can also group settings so the maintainer isn’t hunting through many lines of code to find changes.
You can use both, however, it's always best practice to use external CSS, and class than inline-CSS, however if it's very few line, then it'll not affect the performance much.
I am doing my first html homework and one of the requirements is to display the "greater than" sign in combo with two dashes within a linked text (as shown in the picture, hope you can see it).
Here's what it looks like for me:
Here is my code:
It mostly depends on the font sizes and line-heights, so I would say you use SVG icons for such manners. See Material Icons for such manners. But if you want it in plain font as you have shown, you could use this CSS and HTML
div {
display: flex;
border-bottom: 1px solid black;
width: fit-content;
cursor: pointer
}
<div onclick="Task1.html">
<p style="margin: 0;"><</p>
<p style="margin: 0; margin-top: -2px;">--</p>
<p style="margin: 0; margin-left: 8px">Back</p>
</div>
But I'm saying it again, I would never prefer this approach!
You should not use your current textual method. Your course teacher is approximately 20 years out of date on how HTML elements are used now.
Instead using HTML symbols to draw a perfect arrow, in any font size and any line height.
<div>
<a href='Task1.html'>← Back</a>
</div>
This is cleaner (both with CSS and HTML), simpler and always works across any browser and at any time.
There is a huge list of possible HTML entities you can use so you don't need to choose the same arrow I have used here for example.
If you want more complex glyphs (icons) then you can employ something called font-awesome which has lots of these and has a free version. This system is already used by millions of websites. This uses CSS to load a custom font with custom shapes in it, for more complex things like "home" buttons, and envelopes, and big business brands, etc. etc.
This question already has answers here:
Are empty divs bad?
(6 answers)
Closed 3 years ago.
We were in a code review and were looking at the following mark up that essentially had a border to split up some content above with the title below:
<div class="divider"></div>
<h3>Title</h3>
We were told that this is super bad practice and that instead you should style the h3 element with a border top to avoid divitis. Is this true? I understand not wanting to fill your markup with tons and tons of divs, however, in this instance I don't see much of a problem. Also, in this instance, to get the same design there was more lines of css needed on the h3 than the original divider class. So although you save markup, you are not saving styles. Another option is to wrap the h3 in the div so there is no empty markup. In the end I feel as though it is just preference?
Thoughts?
Depending on your page layout. In general, an blank element does not cause divitis:
<div class="divider"></div>
<h3>Title</h3>
so that in many front-end frameworks these types of elements are embedded by system by default.
finally, It depends on the structure of your page and the purpose of the pages and software.
This can be seen from different angles:
If your design is such that you use dividers in addition to the titles elsewhere, it is best to use the following structure, as this will keep your hand open:
<hr class="divider">
<h3>Title</h3>
But if these dividers are limited to titles only and not used elsewhere, you can use a structure like this:
<h3 class="border-top"></h3>
<h5 class="border-bottom"></h5>
and
.border-top {
border-top: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
Using something like this is a Bad Practice and I strongly believe in that.
HTML already has a built-in horizontal divider called <hr/> (short for "horizontal rule"). Bootstrap styles it like this:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
You Can customize it and use it wherever you want according to your needs.
This really depends on if you are using a CSS framework / library and if you will be working with a team. You need to write understandable and predictable code that the rest of the team will be able to pick up and work on. If <div class="divider"></div> is the standard way per the framework then I would continue to use that.
I also would not consider this "divitis" as that usually refers to a large number of nested <div> elements. Such as
<div class="foo">
<div class="bar">
<div class="baz">
etc...
EDIT: As others have mentioned, which I should have included, is that in cases other than where a framework and / or team are involved, it is generally considered bad practice to not use the spec element. In this case <hr />
This question already has answers here:
How to get box-shadow on left & right sides only
(16 answers)
Closed 7 years ago.
I have a certain thing I want and it annoys me that I cannot find a way.
This is how it is now:
I want the red lines to be green:
The 2 identical text uses this HTML:
<.article class="shadow">
<.header>
<h3>Welcome!<./h3>
<p><ul>(Vincent, 2014-11-07)</ul></p>
</header>
<br>
<p><b>Greetings visitors!</b></p>
<p>You have entered the URL to this site for a reason. To see my work related to making game music. You might aswell look into the FL Studio section, were you can listen to my music on the website or actually download the music to use it. You can also read about me and how these music tracks were made and what I had to go through to make these.</p>
<p>I hope you have a look around.</p>
</article>
I couldn't find a way to paste it in better.
Don't mind the "dots" in the first row of the HTML code.
This is the CSS that I am currently using:
.shadow {
-webkit-box-shadow: inset 1px 0px 0px 0px #47D147;
}
I hope you can understand what I am trying to say.
I don't use javascript or php. I only use HTML and CSS.
Can explain what the CSS code does?
I found out and for the future:
How to get box-shadow on left & right sides only
or use
-webkit-box-shadow: inset 1px 0px 0px 0px #47D147, 1px 0px 0px 0px #47D147;
how to make a circular highlight over any object on a site....
I been looking around and can't find almost any documentation for this. Although I seem to believe that anything is possible now with css, something tells me this would only be available with something like canvas and take a lot of memory.
The only other post I've seen about this is this one...
(jquery) Blackout the entire screen and highlight a section of the page?
although they didnt address the circular issue there
I've seen on a few sites how to highlight a certain element, but how exactly would you make the highlighted area a circle? By only adding z-index to make a square element show above the overlay, it seems impossible to make the area a circle..
Maybe I could z-index every element that would be included in the circle and create a shadow around the edges the same color as the overlay(but if the spotlight needs to run onto part of the background i would need to include the entire background and that could turn ugly)...this may work actually, in certain cases, but that sounds a bit jenky, no?
anyone have a good solution for highlighting objects on a page but that highlight being a circle / almost like spotlighting a element...
You can do this with border-radius and box-shadow at least that's the only way I can think of with pure css
What you do is you make an element that is circle with a transparent background, then you give it a box-shadow completely black that will fill the whole of your page, and you can get some amazing effects.
Example code
#torch{
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
position: fixed;
box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;
}
Don't forget to add your prefixes -moz-, -webkit- ..etc and don't forget your z-index if you need it.
Demo at JSFiddle
By using border-radius to make the circle and for the other stuff may be this can help you..http://jquerytools.org/demos/toolbox/expose/
Just use border-radius to make the container you want to "expose" a circle.
Using the jsfiddle example from your linked post, i've trimmed it down to be easier to follow, but essentially, you just need to use the post you linked to along with a big border radius value to mimic a circle.
http://jsfiddle.net/98EAt/
2 years since the question was asked,
I've developed a plugin for this matter,
Let me know your feedback.