I have been looking into CSS coding methodologies like SMACSS and OOCSS. After doing some homework and inspecting the styles of larger sites (e.g. Google, Facebook) I have noticed very mangled selector names, such as ._50x4 with no stylistic or content semantics.
I am wondering if these larger sites are using some type of name mangling for their css selector naming?
Re the specific selector you specified: ._50x4 in the question.
This selector does look odd, but in fact it's not invalid or mangled.
It is invalid for a class (or ID) selector to begin with a number, so .55x4 would be invalid. But an underscore is a valid first character for a class.
Therefore, the selector ._55x4 is really just a way of having a class named 55x4, but with an underscore at the start of it to make it valid.
Why would you want a class named 55x4? Well, you'd have to ask the developers of the site where you found it if you want the real answer, but you mentioned Facebook and Google, so we can speculate a bit.
Both Facebook and Google are extremely high traffic sites. Therefore, as far as they're concerned, reducing the size of their HTML/CSS/JS code even by a single character makes a big difference to their bandwidth costs.
You or I may have named the class with a more readable name, but when you're trying to save every single possible byte of bandwidth, sensible names go out of the window. So much the same as they've minified their Javascript code to the point of making it unreadable, they will also have optimised their HTML and CSS code to make it as small as possible. Crazy class names like this are the result.
That's not to say this class name is completely crazy -- you've quoted it completely out of context, so there's every chance that the numbers 55 and 4 may apply to something on the page. I don't know, and without any context, no does anyone else.
But I can say this much: This is one case where copying Facebook and Google is not necessarily the best idea. You don't have the same traffic levels as they do, and shaving a every last byte off your code shouldn't have the same kind of priority for you as it does for them. Sure you can optimise stuff, but there's no need to write class names that look like that.
The other thing to say is that for SEO purposes, sensible class names are very helpful. Facebook and (especially) Google can get away with ignoring their SEO rankings, but the rest of us can't.
So regardless of your methodology, class names should be semantic -- ie they should make sense, and help the reader understand what the elements are for.
You're doing the right thing by looking at well known sites to see what they do, but my advice is to try looking at other sites that are closer to your own. Facebook and Google will always be a bit "different" when it comes to how they do things; they're not always the best examples.
Related
Is it possible to have a CSS virus, or what could be the closer of it? (=a non virus but something harmful for the security)
What kind of security breaches could it exploit?
Not a virus, that would not be possible. The only thing that comes to mind is this:
https://hackaday.com/2018/02/25/css-steals-your-web-data/
It abuses the fact that you can select an element based on an attribute's value.
Really clever!
Edit: There is a deprecated CSS property that was usable in IE5.5 (I think) that allowed you to define arbitrary js to be executed at run time. Someone demonstrated that you could put the entirety of jQuery in the property value and it ran. Obviously, this is not very useful today, but interesting, nonetheless. If I find this I will add it to this response.
CSS is a browser side language there for the only way you would be able to execute harmful code in it would be to re-name the file to something like .exe or .php.
You can't get a virus via css. But this is an interesting article about fetching userdata with it https://www.bleepingcomputer.com/news/security/css-code-can-be-abused-to-collect-sensitive-user-data/
The answers that you have gotten stating it is not possible, are correct,
as long as everything works the way it is supposed to.
But since, at least with respect to security, everything on the internet is broken (and most other code as well) in one way or another, it is certainly possible for CSS to be a
carrier of maleficent CSS that exploits security holes either in the CSS parser or the execution of CSS script content.
Then again, that is of course not specific to CSS, but also true for HTML/JS/images etc,
or basically any input from an unsecured source being parsed by any piece of software on your machine.
The access gained from these attack vectors can then be used to inject or
create a virus on the fly.
This "question" has been asked before I've seen, but none of those existing answers really address the question, nor provide resources that are exhaustive in themselves. I am looking for a single resource that I can import into code easily, not have to write a web scraper to expand every possible link and then scrape secondary and tertiary pages for property values.
Examples of links that are useless: (or borderline so)
http://meiert.com/en/indices/css-properties/
for other useless links, check the prior questions, my reputation won't let me post more than 2 links as examples.
Almost ok(ish)
https://www.w3.org/TR/CSS21/propidx.html (except that it is a small fragment of what is possible with css3 and links elsewhere for other properties, and one has to expand the <...> refs to find the actual values for many properties as well).
Ideally something like in the mozilla headers/code might work, requiring a minimal processing, or just a flat table if someone knows where it is would be great.
Hopefully this doesn't get closed as off topic, because the list of property keys and values is of paramount importance for programmers. Otherwise how would one know what all the valid values are? Anyway, I don't think its the kind of question to attract spam, esp as I've done some in depth googling.
This is for inclusion in separate library, not to just write css myself.
...because the list of property keys and values is of paramount importance for programmers. Otherwise how would one know what all the valid values are?
One very easy way to find out the available properties and values is to play with the browser dev tools.
Open the dev tools in your favourite browser. Inspect any element you like from the page you're on, and you should get the HTML shown on the left, with the CSS and other properties of the current element on the right. From here you can explore the available styles, and see their effect in real-time.
The "Computed" styles will show you all the styles that are available and their current settings. The main styles tab will allow you to add new styles or change existing ones. In most browsers, you can use the cursor keys here to explore the values that are available for any given CSS property, and also the properties that are available for the current element. Making changes here will update the page immediately. This is a great way to learn the kinds of things you're looking for.
I think I found something workable, hopefully this helps others too. Basically the place to look is in the opensource webkit code at the CSSPropertyNames.in and CSSValueKeywords.in files. I'm looking at version 7601.3.8 on Apple right now. A user can extract what they need without too much work, though I may just write an easy to use/shareable lib for others.
http://opensource.apple.com/source/WebCore/WebCore-7601.3.8/css/CSSPropertyNames.in
http://opensource.apple.com/source/WebCore/WebCore-7601.3.8/css/CSSValueKeywords.in
7601.3.8 is up to date as of 2015, according to the changelog. It may not have absolutely everything, but I think it should work.
Actually the list I included here is not exhaustive either. The webkit .in files cop out and just list a bunch of values under CSS_PROP_OTHER.
Why do I see .closed-dialogue and .open-dialogue so often in commonly-used libraries, instead of .closed.dialogue and .open.dialogue?
the problem with a single class per element
To format all dialogues with the first approach, you would already need two classes in the selector.
Each time you add another difference, f.e. some colour, you would multiply the number of classes in the selector: .warning-dialogue-closed, .error-dialogue-closed, .warning-dialogue-open, .error-dialogue-open.
Now how can that be good practice? This is hardly maintainable!
You couldn't even separate your code in modules, since the basic selector for dialogues needs to know all dialogues that exist!
several classes per element solve this
By concatenating several classes, the code would be way shorter, more maintainable and easier to read:
.dialogue formats all dialogues, no matter how many different you have.
.error.dialogue and .warning.dialogue would add changes for either flavour. .open.dialogue and .closed.dialogue would take care of the other difference.
You even could have another isolated module that defines big and small dialogues, and the basic module doesn't even have to know about it.
So why have I never seen this?
The problem with your approach is that it's more likely to conflict with other classes.
If the page itself has some other unrelated open class, class="open dialog" will pick up rules for that class and get messed up.
This is why libraries like jQuery UI tend to prefix all of their classes with a unique value.
What is the benefit of writing meaningful css .class and #id names? Do screen readers speak to help the user understand the meaning and purpose of content inside the tags?
Generally-speaking, it's beneficial for the developer/designer only.
Again, as all your recent questions on semantics, the answer stays the same:
It all depends on the data-context of the entity in question.
If your element holds a meaningful field, it is useful to assign it a class (even if you do not want to apply CSS to it) just to easily define that particular field:
<span class="username">Andrew Moore</span>
Doing so has the following advantages:
It easily identifies the field's content in your code.
It increases maintainability.
It helps parsers and third-party applications to fetch this field's value.
Microformats are just a larger example of this. Simply put, they are a set of pre-defined elements and attributes that hold a particular set of data, meant to ease parsing by third-party tools.
Other answers are good, but I will focus on the scraping/third party tools aspect here.
Case 1 is spiders and crawling like search engines. If they parse your page and see something like id="username", they will be more likely to figure out some meaning in that than id="div-style-32". Granted, I'm not sure Google is doing this sort of thing now, but it could be if more people were better about it.
Case 2 is people writing scripts to pull down the HTML and process it in order to extract its content as data. Pretty much anyone who wants to do this can with any markup, its just a matter of how annoying it is. Cleaner and more well described markup allows the scraper script to more easily find the information it needs due to it's increased semantics.
This also includes things like browser extensions or Greasemonkey scripts that allow users to alter the behavior of the site. It will be easier to create these modifications with cleaner markup.
But if you don't want people scraping or modifying your site with client side extension, there is little you can do about from a technical standpoint. You can't stop it, you can only make it more of a pain in the ass. And the benefits of maintainability for the site developers are huge. So really, why not?
In short it makes all the different things you or others could do with your site easier to do.
You don't do it for the machines but for the humans.
If we only cared about machines we'd still be coding in assembly :)
I'm implementing "news" section in asp.net website. There is a list of short versions of articles on one page and when you click one of the links it redirects you to a page with a full article. The problem is that the article's text on the second page will come from database but the articles may vary - some may have links, some may have an image or a set of images, may be differently formatted etc. The obvious solution that my friend have come up with is to keep the article in the database as html including all links, images, formatting, etc. Then it would be simply displayed on the second page. I feel this is not a good solution as if, for example, we decide to change the css class of some div inside this html (let's say it is used in all articles), we will have to find it and change in every single record of the articles table in our database. But on the other hand we have no idea how to do it differently. My question is: how do you usually handle something like this?
I personally don't like the idea of storing full html in the database. Here's an attempt at solving the problem.
Don't go for a potentially infinite number of layouts. Yes all articles may be different but if you stick to a few good layouts then you're going to save yourself a lot of hassle. These layouts can be stored as templates e.g ArticleWithImagesAtTheBottom, ArticleWithImagesOnLeft etc
This way, your headache is less as you can easily change the templates. I guess you could also argue then that the site has some consistency in layout.
Then for storage you have at least 2 options:
Use the model-per-view approach and have eg ArticleWithImagesAtTheBottomModel which would have properties like 1stparagraph, 2ndparagraph, MainImage, ExtraImages
Parse the article according to the template you want to use. e.g look for a paragraph break if you need to.
Always keep the images separate and reference them in another column/table in the db. That gives you most freedom.
By the way, option #2 would be slower as you'd have to parse on the fly each time. I like the model-per-view approach.
Essentially I guess I'm trying to say beware of making things to complicated. An infinite number of layout means an infinite number of potential problems. You can always add more templates as you go if you really want to expand, but you're probably best off starting with say 3 or 4 layouts.
EDITED FROM THIS POINT:
Actually, thinking about it this may not be the best solution. It could work depending on your needs, but I was wondering how the big sites do it. If you really need that much flexibility, you could (as I think was sort of suggested) use a custom markup. Maybe even a simplified or full wiki markup. I'd still tend toward using templates in general, but if you need to insert at least links and images then you can parse for those.
Surely the point of storing HTML with logically placed < div >s is that you DON'T have to go through every bit of HTML you store to make changes to styles?
I presume you're not using inline styles in your stored HTML, and are referencing an external CSS file, right?
The objection you raise to your colleague's proposal does not say anything about the use of a DB. A DB as opposed to what: files? Then it's all the same. You want to screw around with the HTML, you have to do it on "every single record." Which is not any harder than "on every single file." Global changes are a bitch unless you plan for it by, say, referencing an external CSS. But if you're going to have millions of news articles, you had better plan on versioning the CSS as well.
Anyway, the CMSes do what you're thinking of doing. Using a DB is a fine way to go. How to use it would depend on knowing the problem more intimately.
Have you looked into using free content management systems? I can think of a few good ones:
Joomla
Drupal
WordPress
TONS of others... just do some googling.
Check out this Wiki article: http://en.wikipedia.org/wiki/List_of_content_management_systems