I saw the following line in a code:
.className.className {
font-weight: bold;
}
Is there a reason to write this twice?
It is likely used to increase the specificity of the selector.
It would probably be better if it was rewritten to change the source order instead.
Typo maybe. below is valid though.
All <li> elements with a class list that includes both "spacious" and "elegant"
For example, class="elegant retro spacious"
li.spacious.elegant {
margin: 2em;
}
read more
It's a typo!
Technically this code will apply to an element with the following classes: "className" or "className".
But because one match is enough and they are the same name it doesn't matter.
Nope.
Maybe just typo. It has no meaning on css.
Can you think of a way to replace all characters of a paragraph/string with another text or unicode chars using css? My point is to show this text as "obfuscated"/hidden.
Let's say I have a paragraph, I would like every character to be replaced with a unicode char like this: http://www.fileformat.info/info/unicode/char/2588/index.htm. This is one way but I couldn't implemented without javascript. Another way I thought is using SVGs, but I am not able to think of a more specific way.
Right now, we use Blokk font and it works great, but I want to do it without having to do an extra call for one more font.
I know this is mostly a theoretical question, so I don't expect you to provide me the exact answer with code. I would rather know if someone has an idea that I could work on.
You could use background-color and set it to the same color as the text itself. This doesn't actually change the content, but may give the results you are looking for.
For example:
.hidden {
background-color: #000;
}
.hidden:hover {
background-color: transparent;
}
<p>
Here is some <span class="hidden">hidden</span> text.
</p>
I have a long chunk of text which is a file path within a td that causes the whole thing to be 600+pixels wide, when I want to be fit within 200 px.
I can enable word-break:break-all and have it display the whole thing breaking between characters but then it cuts the folder names in half.
So, ideally I'd like to break the lines only upon '/' or '\' characters. Is that possible?
Thank you!
No, you can’t; there is no CSS construct for such purposes at present.
What you can do to suggest allowed line break points is to use a <wbr> tag or a zero-width space after each “/” or “\”. You could do this dynamically with JavaScript, traversing the relevant text nodes.
I don't think you can do this with CSS alone. But here is a way to do it using JQuery:
function (yourObject) {
yourObject.html(yourObject.html()
.replace(///g, '<br>')
.replace(/\/g, '<br>'));
}
This is assuming that your object doesn't contain html within it. If it does, it would replace the slashes, so you would need to check for a > following the slash.
A better solution might be to wrap the long text in a container element that allows scrolling, like StackOverflow does with code blocks:
.longtext {
width: 100%;
display: block;
word-break: none;
overflow: auto;
background: #eee;
}
http://jsfiddle.net/mblase75/NCNSa/
I want to alphabetize css selectors (and properties) in my scss files. I'm sure vim can do this (even if I need to use some external tool). How would you sort the following?
h2 {
color:red;
background-color:green;
}
h1 {
font-size:12px;
}
To this:
h1 {
font-size:12px;
}
h2 {
background-color:green;
color:red;
}
For your simple example the following two snippets seem to work, however I fear they may fall down with larger, more complex css.
To order the properties I used a macro**:
:let #q = "/{^Mvi{:sort^M"|%norm! #q
** Note that the ^M's here are entered with Ctrl-vCtrl-m.
Explanation:
Define a macro to:
Search for a "{"
Select text between "{" and "}"
Sort the selection by line
Run the macro across all lines in the buffer.
To order the selectors I used substitute and sort:
:%s/\v([^}])\n/\1/g|%sort|%s/\v[;{]/&\r/g
Explanation:
For every line that begins with something other than "}" remove the newline to collapse this block down to a single line.
Sort the buffer linewise.
After every ";" or "{" insert a newline.
Trailing whitespace throws this off a bit but you don't have any of that, right? :)
Try CSScomb. This tool sorts your css in cusomizable way. You can try it online.
CSScomb has plugin for Vim.
From the CSScomb's site:
Sorting CSS properties (The order of properties in the help of professionals)
Setting the order of CSS properties (Use the order to which you are accustomed to)
When I first started writing CSS, I was writing it in an expanded form
div.class {
margin: 10px 5px 3px;
border: 1px solid #333;
font-weight: bold;
}
.class .subclass {
text-align:right;
}
but now I find myself writing css like this: (Example from code I'm actually writing now)
.object1 {}
.scrollButton{width:44px;height:135px;}
.scrollButton img {padding:51px 0 0 23px;}
.object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;}
.featuredObject .symbol{line-height:30px; padding-top:6px;}
.featuredObject .value {width:90px;}
.featuredObject .valueChange {padding:5px 0 0 0;}
.featuredObject img {position:absolute;margin:32px 0 0 107px;}
and I'm beginning to worry because a lot of the time I see the first form done in examples online, while I find the second form a lot easier for me to work with. It has a lower vertical height, so I can see all the classes at a glance with less scrolling, the tabulation of the hierarchy seems more apparent, and it looks more like code I'd write with javascript or html. Is this a valid way of doing code, or to keep with standards when putting it online should I use the vertical form instead?
Well, here is what say the most :)
summary:
css-tricks.com ran a poll. By a margin of roughly 3 to 1, most people preferred multi-line over single line css styles.
I personally prefer the first style. I like things that are easy to read and I don't mind scrolling. The dense nature of the second style slows down my reading, my ability to pick out the items that I'm interested in.
There certainly are trade offs to be considered with CSS due to the file size. CSS can be compressed. I find the size of CSS files to be the least of my worries with the sites I've built so far.
Ultimately, the important thing is that whichever style you choose to use is to be consistent. That consistency will make your life simpler when you have to update your CSS or when another developer has to update your CSS.
Indicating the hierarchy using indentation is not a bad idea. However, you should be careful that you don't fool yourself. In your example, you may be assuming that .scrollButton is always within .object1. But CSS doesn't obey that rule. If you used a .scrollButton class outside of .object1, it would still get the styles.
I dont know about you but I like the vertical mode during dev as it is far more easier to read for me.
However, in prod, you wanna compress your css to reduce payload and hence, the second style makes sense. Mostly, you would be using some CSS compressor to do this.
i like to write css in multi line. because this is easier to write and read. we can find error as early as possible and a look of view is nice with indentation . mostly when a designer work with css and gave to developer to develop site than developer can understand easily.
so i think multi line css is better way to work.
I personally find both of your examples hard to read, especially the second one.
Multi-line is easier to follow, and indentation can be misleading as CSS is not necessarily applied in that way. Your indentation may lead you to believe it is.
I prefer the basic tried and true method of multi-line, with reasonable/logical order:
div.class
{
margin: 10px 5px 3px;
border: 1px solid #333;
font-weight: bold;
}
.class
{
text-align: center;
margin-left: 10px;
}
.class .subclass
{
text-align:right;
}
Takes up a little more space and requires a little scrolling to take in, but is easy to follow. Those worried about optimization can always use CSS shrinking tools for production CSS files.
In the end as long as you are very consistent with your work and across a team (if applicable) then no answer is more correct.
I prefer the second style, but be aware that it's a style. In the same way that some people prefer
function (arg)
{
body();
}
to
function(arg){
body();
}
I don't get it, myself. The argument is "it's easier to read", and my response is consistently "... for you". As a note, I get the feeling that this is why so many examples use the more-whitespace version; it has the reputation (if not confirmed property) of being easier to read.
Pick the one you like and stick with it. If you have a team to cooperate with, try to get to consensus, or barring that, write some auto-formatting scripts and stay out of each other's way. It's not like it's terribly difficult to mechanically transform one into the other.
The style you write in is your choice(I prefer multi line) but as Rajat said you want to remove any extra whitespace after dev. Anytime you can reduce file size and payload you are doing your site and your visitors a favor.
I think it also depends on your editor. I use multi line formatting and condense every definition with Vim's folding (I set up folding marks to be { and }) so I get one tag/class/id per line, expandable when needed.
Using comments to identify "sections" I get a very clean look with minimal vertical scroll while maintaining the readability of multi line on expanded definitions.
I just want to point out that Textmate has an option that allows you to easily switch between these two styles by selecting an area and pressing Ctrl-Q/Ctrl-Alt-Q to expand/collapse. As a consequence I have come to find that I prefer my CSS collapsed unless I am writing or deep debugging a specific section. But, with the ability to easily switch between he two I see that both ways are useful for different circumstances.
I prefer multiline right up until we deploy. At that point I want it minified.
Perhaps, when you have multiple selectors and one rule, like this:
#header li a, #header li span {
display:inline-block;
}
So, I prefer to do:
#header li a,
#header li span {
display:inline-block;
}
I've always liked this style:
#something1 {
color : #ffffff;
background : #000000;
}
#something2 {
color : #000000;
background : #ffffff;
}
But yo answer your question: As long as it functions the same way, there is no "proper" or "best" way to format your code. Use a style your comfortable with.