157
The question is if the data is semantically a table (i.e. a set of data or units of information logically organized in two dimensions) or you just use the grid for visual layout, e.g. because you want a sidebar to expand or something like that.
If your information is semantically a table, you use a <table>-tag. If you just want a grid for layout ...
129
This is a common pattern for making responsive tables. Tabular data is tricky to display on mobiles since the page will either be zoomed in to read text, meaning tables go off the side of the page and the user has to scroll backwards and forwards to read the table, or the page will be zoomed out, usually meaning that the table is too small to be able to read....
118
Firstly, magic values are avoided in programming by using variables or constants. CSS does not support variables, so even if magic values were frowned on, you don't have much of a choice (except using a preprocessor as SASS, but you wouldn't do that for a single snippet).
Secondly, values might not be as magic in a domain specific language like CSS. In ...
104
Actually, I would say that the use of class names like "table" in your example demonstrates how people don't actually understand what they're doing when trying for semantic markup. They get marks for trying to show that the content is not tabular data, but they lose marks for bad class names.
<div class="table">
<div class="row">
<div ...
82
You should build a house first, then paint it.
An HTML document can stand on its own, even though it may look dull. A CSS style sheet cannot; it is nothing displayable (except as code) but instructions for display.
It’s a different issue that during painting, you may wish to do changes to the house. With real houses that’s usually not feasible, but in HTML+...
80
It's acceptable because these formats are not code, but data. If you were to remove all the "magic numbers," you would essentially duplicate every label, and end up with ridiculous looking files like:
mainkite_width = 200px
...
.mainkite {
width: mainkite_width;
...
Every time you needed to change some data, you would need to look in two places. ...
35
There is no way to avoid that. They are coupled because they interact with each other. If your javascript intends on doing any kind of DOM manipulation, then it needs a way to reference the DOM.
There are various conventions for it.
The Level 2 DOM API provides the getElementById, getElementByTagName, and getElementsByName methods. To this day these are ...
33
Chris Coyier has an awesome rundown of SASS vs LESS over at css-tricks.com. It's definitely worth the read.
As for some of your specific questions:
Community
I work entirely with SASS/Compass, so I'm not intimately familiar with LESS's community, but nor have I really needed SASS's community. Their documentation is fantastic and has solved any problems I'...
33
A colleague of mine is heavily pushing the BEM (Block Element Modifier) method for the CSS in a project he's helming, and I just cannot comprehend what makes it better than the LESS CSS we've been writing for years.
BEM is a CSS methodology. Others include OOCSS and SMACSS. These methodologies are used to write modular, extensible, reusable code that ...
29
Former Designer here, turned Dev, and I used to piss and moan about Web Controls too. Honestly, its MUCH cheaper for a designer to adjust their practices than for a .NET Developer to delve into a custom impelmentation of a GridView because the designer INSISTED that each TD have a 'rel' tag (or whatever).
As Arseni Mourzenko very wisely pointed out, the ...
26
Nope, sorry. Even if you could, users could just submit the form to your site using some other tool.
The golden rule here is: Never trust user input. Be sure to validate everything on the server side (in php) and look up any important values from your database instead of trusting whatever came from the user.
25
The prohibition on magic numbers is the primordial version of this design principle:
Make decisions in one place.
But these are not magic numbers. At least, not as far as any coding style guide I know of is concerned.
width: 200px;
height: 200px;
They are clearly labeled. Sure, the numbers happen to be the same. But the width is the width and ...
25
However, this effect will be negated if I define the font size in the body tag for example.
body {
font-size: 16px;
}
Because now my css is overriding the font size set by the browser.
You are forgetting about accessibility.
See C14: Using em units for font sizes from Web Content Accessibility Guidelines (WCAG 2.0).
Set the font size option of your ...
19
Simply because Web performance really matters !
99% times it will give you faster end-user response times.
Here are a few exampels from Velocity Conf.
Bing – A page that was 2 seconds slower resulted in a 4.3% drop in revenue/user.
Google – A 400 millisecond delay caused a 0.59% drop in searches/user.
Yahoo! – A 400 milliseconds slowdown resulted in a 5-9% ...
19
A style element inside the body element violates HTML syntax rules. (Except that according to HTML5 drafts, it is allowed in some conditions, if the scoped attributes is present; this attribute is supported by some browsers.) On the other hand, browsers don’t care. The division into head and body elements is theoretical.
Yet, you gain nothing by using the ...
17
No.
Source control should only contain source.
If it's generated from source, it doesn't belong there - and should be generated by your build process.
The fundamental reason you don't want to source control intermediate build artifacts is that if you do, it gets really hard to trust wether what you're running comes from the source you just modified, or ...
16
1. Why was it important to separate CSS from HTML?
Originally, JavaScript was used for fancy (and extremely annoying) animations and websites were globally just a bunch of HTML and CSS. On server side, frameworks were not as numerous and powerful as now.
This meant that you had a choice:
Either you make proper separation between content (HTML) and style (...
16
If you count your own children you would say "my first child", "my second child" and so on, not "my zeroth child". This is simply how humans count. (Note: This is not some subjective opinion by me. This is literally how ordinal numbers works.)
The reason you even ask the question is probably because you are a programmer, and many programming languages ...
15
CSS isn't trying to make things more difficult on purpose, it was designed with a far simpler goal in mind, variables and hierarchies are hardly its only shortcomings. LESS and Sass exist specifically to address these shortcomings, and until either capability is natively supported, you should stick with them.
That said, W3C's CSS Working Group is working on ...
15
In my company, there are a few people specialized in this job.
They are designers. And they know HTML. They can be a bridge between the designers and the front-end engineers; which they usually are. This way, we just have to integrate their HTML.
This is a hard job. There's a reason sites like "PSD to HTML in 24h" work well. The solution in our company is ...
14
What is the real difference between a minified and uncompressed file? What are the benefits of each?
Minification isn't compression in the classic sense. It refers to the removal of whitespace and other nonessential characters like comments so that the code is still valid but as compact as possible. It's effectively a form of code obfuscation.
As such, it is not recommended for development because it makes the code much less readable and much harder to ...
14
"It depends." For normal development tracking, no. For cloud and DevOps deployments, however, it's often convenient, or even required.
Most of the time,
@ptyx is correct. Indeed, his "no" could be stated somewhat more emphatically. Something like "No. No! OMG NO!"
Why not store minified or compressed assets in source control system like Git?
They can be ...
14
There are no namespaces in CSS. All you do in CSS ends up in global scope. This is by design.
This leads to two problems:
What happens to the apps using my library if, in the library, I introduce a given style?
What happens to other parts of my 100M-LOC app if I introduce a given style in the part I'm working on?
Those are two distinct situations, which ...
13
I always use pen and paper first, full size paper, to-scale drawings.
That is if you don't have your design ironed out. If you are confident in your design, I have a balanced approach; html is the structure, css the glue. Keep building up in (HTML,CSS) concept 'tuples'.
(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)
(bigHTML,bigHTML) + (bigHTML,bigCSS) -&...
13
This seems like a very bad idea to me. defining css rules for classes and adding those classes to the html is a great way to make your css reusable. The way you're suggesting, with a complex selectors, sounds like a recipe for mangled stylesheets. Sure, your html is clean as a whistle, but now the css is a pain in the butt to maintain.
Consider:
.centre-...
13
the point of ems is to define all measurements in your webpage, by the base font size
This may be a misunderstanding of terms on my part, but to clarify: em is relative to "the current element's" font size. rem is relative to the root font size.
I get that ems would have been important in the days of older browsers, where zooming on the page would only ...
13
It's called minification. It makes the CSS files (and potentially Javascript files too) smaller, requiring less bandwidth to download. This can make a significant difference in performance, especially for wireless devices.
12
Stop worrying so much about specific devices.
The ability to detect whether a user is viewing your website via a smartphone, tablet, or desktop, seems to be increasingly difficult if all you're going by is screen resolution
It is getting increasingly difficult to detect via screen resolution, and it will only get harder as more devices enter the market, ...
12
Programmers are not human encyclopedias. We remember what we use often, and we keep actual encyclopedias nearby for what we don't. I consider myself a "veteran" C# coder, and there are things I Google every day to do my job. That's probably one of the hallmarks of a veteran; that he knows what he doesn't know, and where to find it.
The only reason you'd ...
Only top voted, non community-wiki answers of a minimum length are eligible
