I have an extremely messy stylesheet that I'm trying to clean up, and one thing I've searched for an answer to is how to clean an example of this up:
.element .Change {
font-size: 1em;
}
.element .Name {
font-size: 1em;
}
can this be re-written in a cleaner way? ex:
.element .Change, .Name {
font-size: 1em;
}
I should probably know this, but when I search for putting CSS on one line, I get examples of single-line CSS.
Thanks for your help
Yes, almost exactly as you propose.
.element .Change,
.element .Name {
font-size: 1em;
}
.element .Change, .element .Name {
font-size: 1em;
}
CSS redundancy is not all the bad, as you need to keep some buffer for future changes.
If you're sure that your styling won't change, then what you have done is perfectly fine.
I'd advise you to have a look at LESS and other similar compile-to-CSS languages.
Related
I got some example CSS code (well written and working) with many span statements inside, that I modified for my use. What exactly they do? VS Code shows me as an error, but browsers don't complain, and I couldn't find any references in the CSS documentation, as if this syntax does not exist.
Example:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
}
VS code complains:
"code": "css-colonexpected",
"severity": 8,
"message": "colon expected",
"source": "css",
If I add colon it would be suggesting keys right away, and would not accept anything in curly brackets{}
Thanks
the brackets { and } define scope so that
body {
color: #000;
}
Would define that the color (text color) of the body element type (css query selector) would be #000 (which is hex for black)
however, if you have an element in an element like this using a precompiler such as less for css using the less syntax.
body {
color: #000;
span {
color: #FF0000;
}
}
this would do as the previous css did, but in less you can create a hierarchy
the body's color will be set to black as before.
and then any span child of the body element will have its color set to red (#FF0000)
CSS/LESS are used in conjunction with the HTML DOM object model.
You're correct that this syntax doesn't exist for CSS, as it doesn't support nested selectors like this.
The correct syntax would be:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
}
h2 span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
This syntax is of course perfectly acceptable if you use a CSS preprocessor, like SASS or LESS for example. CSS preprocessors compile CSS written like you've done into standard CSS syntax, and add extra functionality, like using variables and conditional statements.
I think that modern browsers are probably capable of understanding syntax like this in certain situations, but if you want to use to this sort of syntax then using a preprocessor is a safer option to avoid errors.
To clarify:
Right now, most likely due to readability, CSS is written somewhat like so:
element {
text-decoration: underline;
}
#selector {
font-size: 50px;
color: red;
text-decoration: underline;
}
.selector-two {
color: red;
}
In this example, properties are assigned to selectors to give them a certain style. Also, certain properties are assigned multiple times to different selectors. Would there be a difference in performance or size of the stylesheet if it was written like so:
element, #selector { text-decoration: underline; }
#selector, .selector-two { color: red; }
#selector { font-size: 50px; }
Of course this wouldn't make it easy to see in the CSS which styles are applied to certain elements, but would there be any benefits if you can minify your CSS code to look this?
CSS speed optimisation is a complete waste of time.
Browsers can parse that stuff ridiculously quickly.
You'd be better off focusing on reducing the file size of your collateral, i.e. your images, css files, html, javascript, etc.
I thought that it was possible, but everyone tells me it's not.
I want context styling in my css file like:
div#foo {
h2 {
color: #F42
}
p.bar {
font-size: 12px
}
}
So that only h2 and p.bar in the div with id foo will be styled. Or is this only possible with LESS and other similar libs?
Thanks & kind regards,
Jurik
This is not possible with standard css, the 2 classes would need to be set like:
div#foo h2 {}
div#foo p.bar {}
This is not possible with pure CSS, that's why you should use SCSS or LESS (i suggest to use SASS/SCSS), which are CSS supersets
LESS/SASS-SCSS allows you to write dynamic CSS with ease, take a look at this comparision
check out COMPASS which is the main reason why I suggest you SASS/SCSS
It's possible, but as follows:
div#foo h2 {
/* styles go here */
}
div#foo p.bar {
/* styles go here */
}
What you have above is just a slightly altered version of:
div#foo h2 { color: #F42; }
div#foo p.bar { font-size: 12px }
I don't really see any gain to it.
Less let's you do pretty much what you described, as well as some other cool stuff like use variables in css etc.
Of course, once you let it compile, it'll just turn it into the valid CSS that has been suggested in the previous answers. Still worth a look IMHO.
yes but separated...
div#foo h2 {
color: #F42
}
div#foo p.bar {
font-size: 12px
}
but I would like too change a bit:
#foo h2 {
color: #F42
}
#foo p.bar {
font-size: 12px
}
you are using an ID so you don't need to say nothing before because ID's are unique
Its not possible using default CSS techniques.
But, by using sass and less however, it is possible.
The code in your question, works in both of the libraries above.
I was wondering if something like this can be done in CSS. I want to be able to group css so that I can I don't have to write it like this.
.wrapper .header {do: something};
.wrapper .nav .firstMenuItem {do: something};
[div id="wrapper"]
[div class="header"]
[div class="nav"]
[ul]
[li class="firstMenuItem">First Item</li]
[/ul]
[/div]
[/div]
[/div]
Instead, I would like to do something like this but I've never seen it being used like this
.wrapper
{
.header .nav {do:something;}
.header .nav .firstMenuItem
{
do: something;
}
}
You can do this with LESS and SASS
However, before going too far down this road I recommend you read a little about Object Oriented CSS. (Some good tips from people who have experience with large projects)
LESS example:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
SASS example:
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
#extend .error;
border-width: 3px;
}
You can't do that with pure CSS, but you can use something like:
LESS
SCSS
Not with CSS alone, but you can for example use LESS which provides this kind of nesting.
I'm afraid that is just not possible in classic CSS. It is against the syntax.
There to exist interpreters for alternative syntaxes, which will just turn your syntax into valid CSS either at compile-time or run-time. You could look for or write one of those.
But if you want what you write to be valid CSS, this is just not possible.
See section /* Common Classes */ of this page.
http://webdesign.about.com/od/css/a/master_stylesht_2.htm
are these css classes good, to use in any project? in terms of semantic?
/* Common Classes */
.clear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.noindent { margin-left: 0; padding-left: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }
.nobullet { list-style: none; list-style-image: none; }
No. They are not good choices. The whole point of css and in particular about the concept of class is to describe "what" something represents, not "how" it should appear. What something means (i.e. its semantics) and how it appears (i.e. its presentation) are two separated concepts. The fact that something is, say, a menu does not change if you decide to show it blue on light blue with one stylesheet and high contrast black on white on another stylesheet made for colorblind people.
If you give class a presentation meaning, changing how a document appears would require changes in the web page html, defeating the whole point of having CSS as a technology specifically designed to provide and encapsulate presentation. To prevent this, the alternative would be to end up having classes whose names do not represent reasonable information (e.g. class called "bluefont" which actually contains a color:red directive). Hence, having "bluefont" as a name is totally arbitrary, and here becomes desynchronized with the actual content. It could have been a random string "abgewdgbcv", but then it's better to choose something that is unrelated to presentation and conveys meaning: its associated semantics.
And we close the circle: it's the whole point of classes. See also this document at W3.
No, not really.
Preferrably a class name should describe what you use it for, not exactly what it does.
If you for example name a class "bluebold" and then decide that you want the text to be red and italic, you either have to create a new class and change it everywhere it's used, or you end up with a class name that no longer fits.
One point that I would like to suggest is, when you are extending these just make sure that you just use verbs instead of using any adjectives as names for the classes and you should be good!
Edit:
I agree with others point of class names representing what it is used for, not exactly what it does.
Common CSS classes are way too granular and promote classitis problem. Pseudo selectors can mitigate the problem to some extent. Assuming a new website is being designed I would do the following:
*{
margin:0;
padding:0
}
li {
list-style: none;
list-style-image: none;
}
The rest are difficult to address, floatLeft and floatRight are to be defined by the layout,
<div id="main">
<div class="searchPanel">
</div>
<div class="resultsPanel">
</div>
</div>
The CSS ideally should look like ( layout driven)
#main searchPanel {
float: left;
}
#main resultsPanel {
float: right;
}
Hope you get the idea. I however, face problems with bold/underlined text. Underlined text is indicative of ugly design. Users tend to confuse such with hyper-links
some recomendations:
.floatLeft --> .float-left:
no camel cased.
.bold --> .important
name should tell the goal no showing how to do it
.nobullet --> ul.nobullet
is better to be most specified to avoid conflict with other css.