Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 months ago.
Improve this question
New here. I am currently building a personal website with HTML & CSS (following MDN course).
CSS styling can make sheets quite lengthy.
Is it a good practice to style "reusable components" (using classes) and then using "id" to slightly alter such components?
Below code example + visual.
Thanks for the help!
.block { /* use of class for the block component */
background-color: var(--darkest-green);
border: 1px solid black;
margin: 10px 0px;
}
#block_webpages { /* use of ID to adjust needed properties */
background-color: var(--darkest-green);
}
#block_articles { /* use of ID to adjust needed properties */
background-color: var(--light-green)
}
#block_about { /* use of ID to adjust needed properties */
background-color: var(--green);
}
<div class = "block" id = "block_webpages">Introduction of the different web pages</div>
<div class = "block" id = "block_articles">About the website's author</div>
<div class = "block" id = "block_about">Shows the latest published article</div>
rendering on the webpage - very basic element for demo purposes
id's are more powerful selectors than class. It is advisable to use class not id for better programming or coder. (there are many other reasons also)
You can do the same thing with the class itself without giving id.
Good that you are using CSS variable naming property👍🏼
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I was looking around at some examples and noticed that there were two CSS rules with the same selector, doing two different things. Is there a reason they couldn't have been merged?
Example:
.example {
padding: 0.5em;
text-align: center;
}
.example {
background: #ffffff;
}
What's the difference from this?
.example {
padding: 0.5em;
text-align: center;
background: #ffffff;
}
There is no reason at all. It is personal preference to keep them on seperate or keep them together. You can choose to either seperate them or keep them together. No matter which you choose, the end result remains the same.
The reason is a mistake.
If the class has been defined earlier, it should contain all properties here. Duplicating a class is not good practice. It seems to be even a mistake.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
this is my first post so excuse me if I'm doing anything wrong. My question is how should I layout my CSS files? Just curious to see if there's a "right way" CSS should be written. Thanks!
Understanding how browsers parse CSS and render websites is an important first step towards writing more efficient code.
There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.
#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title='home'] /* Universal */
You can refer below articles to write more efficient CSS
Efficiently rendering css
Writing efficient css selectors
You can indent your css. Or minimize it at the end of the project.
You can use plenty of websites that can help you to do it.
That's an example - CleanCSS
CSS should be laid out by specificity.
IDs are more specific than classes which are more specific than tags. Therefore you would want general tag styles at the top of your sheet and then classes and the IDs.
p { }
.p { }
#p { }
You can also, matter of preference, in large projects, separate CSS styles into different sheets to make it easier for other people to read through your code.
CSS is whitespace insensitive so it tabbing will not make the compilation change, but it is of course common practice to tab accordingly.
There are plenty of other rules that many programmers follow, but the majority of them are opinionated so it is up to you to adopt an efficient way to layout your CSS. Even the rules I have stated will not "break" your CSS if not used, but they tend to help cause less problems. Research this topic further and try and adopt a set of rules to follow and stay consistent with them.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Two different paragraph can be given two different type of colours using the below css code.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
Now, In the html code i can Specify
<p class="paraStyle1">Hello</p>
<p class="paraStyle2">Hello There</p>
The above CSS code can be modified to as Shown below, So which one should be used, considering best coding Technique(Design).
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
Classes can be duplicated which means a p tag and a div tag can have same class.
But if you want to style only the p tag then you should follow the second style. If you are not using your class anywhere else except for the p tag you can use the first style.
.paraStyle1{
color: rgb(100,100,100);
}
.paraStyle2{
color: rgb(200,200,200);
}
will not be limited to p tags....it can be allocated to any tag having the class paraStyle1 or paraStyle2, it can be a,p or even a div... see demo here
p.paraStyle1{
color: rgb(100,100,100);
}
p.paraStyle2{
color: rgb(200,200,200);
}
is specifically for the p tags having classes paraStyle1 or paraStyle2....no other html tag can avail the style of these classes except p tags.... see demo here !!
The second syntax (p.paraStyle1) applies the contained css only to p tags with the paraStyle1 class. You should use this syntax if you are planning on reusing that class name with different styling for different tags.
When you specify your CSS selector to be p.<class>, it means that you only want the p tags with that class to be styled. However, if you need this same style to be applied to other tags as well (eg a <div> tag), then use the first method.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have 2 controls which must have 100% width. So I have a question what is better:
1) declare CSS style name for each control (CSS style will contain only width: 100% declaration)
2) declare only one CSS style name which will be applied to all widgets requiring 100% width?
I mean:
.myFirstWidget {
width: 100%;
}
.mySecondWidget {
width: 100%;
}
vs
.maxWidthWidget { width: 100%; }
Use .maxWidthWidget it will be easier to update a site if you stick to these naming conventions. Only separate if they ever need to be different.
Maybe like this?
.myFirstWidget,.mySecondWidget {
width: 100%;
}
I'd go for the one-class fits all. It's more descriptive as a name, and it's easier to maintain, and uses the principle of reusability. :-)
A better solution is:
.myFirstWidget, .mySecondWidget {
width: 100%;
/* Other shared properties... */
}
.myFirstWidget {
/* Properties specific to this widget... */
}
.mySecondWidget {
/* Properties specific to this widget... */
}